How to load dynamic data to react-native-chart-kit?

Question

Actually i'm would load data dynamically to react-native-chart-kit but i can't find any documentation on how could i do it.

I have an API that give the data for each month where there was some income and the response look's like the following

[{"IMPORTO":722.51},{"IMPORTO":911},{"IMPORTO":1188.53},{"IMPORTO":12},{"IMPORTO":390.65},{"IMPORTO":54.98}]

I have yet a method where i fetch that data but i can't get how can i use it as dataset of the chart.

Here is the code of my Home.JS where i build the chart and GetData is the fetch function for API DATA:

  import React from 'react';
import {Text,View,Dimensions} from 'react-native';
import {LineChart} from "react-native-chart-kit";

const data = {
  labels: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],
  datasets: [
    {
      data: []
    }
  ]
}
const chartConfig = {
  backgroundColor: "#e26a00",
  backgroundGradientFrom: "#fb8c00",
  backgroundGradientTo: "#ffa726",
  decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  style: {
    borderRadius: 16
  },
  propsForDots: {
    r: "6",
    strokeWidth: "2",
    stroke: "#ffa726"
  }
}

export default class Home extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
      dataSource: []
    };

  }

  componentDidMount() {
  this.GetData();
  }

  GetData = () => {
    return fetch('http://192.168.100.158:3000/data')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson
      });
    })
    .catch((error) =>{
      console.error(error);
    });
  }

  render() {
    data.datasets[0].data = this.state.dataSource.map(value => value. IMPORTO);

    return (
      <View>
      <LineChart
      data={data}
      width={Dimensions.get("window").width} // from react-native
      height={220}
      yAxisLabel={"$"}
      chartConfig={chartConfig}
      bezier
      style={{
        marginVertical: 8,
        borderRadius: 16
      }}
      />
      </View>
    );
  }
}

I've tryed to set data = { this.state.dataSource.IMPORTO } but it doesn't work.

Answer 1

In your render method, change the data to come from the state.

render() {

    data.datasets[0].data = this.state.dataSource.map(value => value.IMPORTO);

    return (
      <View>
          <LineChart
              data={data}
              width={Dimensions.get("window").width} // from react-native
              height={220}
              yAxisLabel={"$"}
              chartConfig={chartConfig}
              bezier
              style={{
                    marginVertical: 8,
                    borderRadius: 16
              }}
          />
      </View>
    );
}

Now, when the asynchronous call "GetData()" finishes, it will update the state, and the component will re-render with the new data.

You could also set the initial values in the state itself:

constructor(props) {
    super(props);
    this.state = {
       isLoading: true,
       data: {
           labels: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],
           datasets: [
               {
                   data: []
               }
           ]
       }
    }
}

GetData = () => {
    const self = this;

    return fetch('http://192.168.100.158:3000/data')
        .then((response) => response.json())
        .then((responseJson) => {

            // clone the data from the state
            const dataClone = {...self.state.data}

            const values = responseJson.map(value => value.IMPORTO);

            dataClone.datasets[0].data = values;
    
            self.setState({
                isLoading: false,
                data: dataClone,
            });
    })
    .catch((error) =>{
      console.error(error);
    });
}

render() {

    // since we're now referencing this.state.data, its value 
    // will be updated directly when we update the state
    
    return (
      <View>
          <LineChart
              data={this.state.data}
              width={Dimensions.get("window").width} // from react-native
              height={220}
              yAxisLabel={"$"}
              chartConfig={chartConfig}
              bezier
              style={{
                  marginVertical: 8,
                  borderRadius: 16
              }}
          />
      </View>
    );
}