Line Chart for Streaming Real-time Data

First of all, thank you so much for the great job! I’ve been searching around and this is the best chart library. This is more of a question instead of a problem. Please feel free to share your thoughts.

What is the problem?

Trying to draw the line chart for real time data. I am building an application for vehicle data visualization. The data looks like this { speed: 55 } and the server will send me this data every 0.3 seconds.

I’m looking at this example and trying to build the line chart like this.

The data we passed is an array. However, with my case, the data isn’t prepared and it is real-time data. My question is how to pass or structure this data and pass it in order to animate the line chart.

When does it happen?

What platform?

Android

React Native version: 0.55.4

Code to reproduce

// put code here
const SpeedLineChart = (props) => {
  
    const { vehicleStates } = props.vehicleStates;
    console.log( vehicleStates .speed)
        return (
            <View style = {{ height: 200, flexDirection: 'row'}}>
            <LineChart
                style = {{ height: 300, width: 300}}
                animated = {true}
                animationDuration = {10}
                gridMin = {0}
                gridMax = {100}
                data = { [vehicleStates.speed] }
                svg = {{ stroke: 'rgb(134, 65, 244)' }}
                contentInset = {{ top: 20, bottom: 20 }}
            >
                <Grid/>
            </LineChart>
            </View>
        )
  }

console log output:
speed: 50
speed: 51
speed: 45
speed: 53
...
### Stacktrace (if crash)

-->

[j-funk]

@Yaweii I am very interested in your results to this query! Would you be able to elaborate on what you ended up with?

[Yaweii]

@JesperLekland Thanks! I will close this issue for now. Really appreciated your help!