Update Real-Time Line Chart Dynamically

[ding-si-han]

I'm trying to get my chart to update dynamically as new data comes. I have already updated the values, but the graph does not update the change in data dynamically. What is the equivalent function of the React function chart.update() for react-native to enable the graph to update?

`import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions } from 'react-native';
import CheckBox from 'react-native-check-box'

export default class FocusScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: false,
}
this.dates =['January', 'February', 'March', 'April', 'May', 'June']
this.values = [20, 30,40,50,60,70]
this.shouldRedraw = true
this.chart = new LineChart();
}

componentDidMount(){
this.timer = setInterval(()=> this.returnLabels(), 1000)
this.timer = setInterval(()=> this.returnData(), 1000)
}

updateShouldRedraw = () => {
this.shouldRedraw = true;
}

returnLabels = () => {
this.dates.push(parseInt(Math.random()*100).toString())
console.log(this.dates)
return this.dates
}

returnData = () => {
this.values.push(parseInt(Math.random()*100))
console.log(this.values)
return this.values
}

render() {
return (



Bezier Line Chart

<LineChart

        data={{
          labels: this.returnLabels(),
          datasets: [{
            data: this.returnData()
          }]
        }}
        redraw
        width={Dimensions.get('window').width /2} // from react-native
        height={400}
        yAxisLabel={'$'}
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 2, // optional, defaults to 2dp
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16
          }
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16
        }}
      />
    </View>
  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,

alignItems: 'center',
width: '100%',
height: '100%',

},
imageBackground: {
height: '100%',
width: '100%',
},
wrapper: {
borderWidth: 3,
borderColor: 'green',
flex: 1,
margin: '10%',
marginTop: '20%',
height: 40,
justifyContent: 'flex-end',
alignItems: 'stretch',

},

leftText: {
fontSize: 28,
}
})`

[Moon-009]

react-native-chart-kit

sorry, is the question about "react-native-chart-kit" component? This component is not developed by me