Abhinandan-Kushwaha / react-native-gifted-charts

The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
https://www.npmjs.com/package/react-native-gifted-charts
MIT License
726 stars 149 forks source link

Support for dynamic timestamp values on X-Axis for LineChart #770

Open quememo opened 1 month ago

quememo commented 1 month ago

I would like to create a daily LineChart that evolves throughout the day, where the X-axis is fixed between 00:00 and the following 00:00 (a total of 24 hours) with labels every 4 hours. The Y-axis would indicate the number of steps walked up to that moment. Something like this: image

Specifically, an example of my data looks like this:

[
    {
        "steps": 28,
        "timestamp": "2024-08-06T02:10:48.000000-04:00"
    },
    {
        "steps": 62,
        "timestamp": "2024-08-06T04:21:19.000000-04:00"
    },
    {
        "steps": 98,
        "timestamp": "2024-08-06T09:16:49.000000-04:00"
    },
    {
        "steps": 116,
        "timestamp": "2024-08-06T09:25:43.000000-04:00"
    },
    {
        "steps": 261,
        "timestamp": "2024-08-06T14:06:51.000000-04:00"
    }
]

The timestamps can be at any moment; there is no regular interval. Considering this, by midday, only half of the chart should be drawn, and the points should be positioned according to the timestamp value.

Is it possible to do this without normalizing my data using this library? According to what I saw in this issue, it's not supported, but I would like to know if there is any alternative or if it is planned to be supported in the future.

Abhinandan-Kushwaha commented 1 month ago

Hi @quememo Thanks for requesting this feature. For Bar charts, we can add spacing property to individual data items. I will try to add this feature to Line charts as well.

Expect a new release with this feature in 2-3 days.