title: How to load dynamic data to react-native-chart-kit?
body: <p>Actually i'm would load data dynamically to <a href="https://www.npmjs.com/package/react-native-chart-kit" rel="nofollow noreferrer">react-native-chart-kit</a> but i can't find any documentation on how could i do it.</p>
  
  <p>I have an API that give the data for each month where there was some income and the response look's like the following</p>
  
  <pre><code>[{"IMPORTO":722.51},{"IMPORTO":911},{"IMPORTO":1188.53},{"IMPORTO":12},{"IMPORTO":390.65},{"IMPORTO":54.98}]
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the code of my Home.JS where i build the chart and GetData is the fetch function for API DATA:</p>
  
  <pre><code>  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) =&gt; `rgba(255, 255, 255, ${opacity})`,
    labelColor: (opacity = 1) =&gt; `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 = () =&gt; {
      return fetch('http://192.168.100.158:3000/data')
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
        this.setState({
          isLoading: false,
          dataSource: responseJson
        });
      })
      .catch((error) =&gt;{
        console.error(error);
      });
    }
  
    render() {
      data.datasets[0].data = this.state.dataSource.map(value =&gt; value. IMPORTO);
  
      return (
        &lt;View&gt;
        &lt;LineChart
        data={data}
        width={Dimensions.get("window").width} // from react-native
        height={220}
        yAxisLabel={"$"}
        chartConfig={chartConfig}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 16
        }}
        /&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>I've tryed to set data = { this.state.dataSource.IMPORTO } but it doesn't work.</p>