title: Create Chart using Reactjs, ApexChart and axios
body: <p>I am using Reactjs with ApexCharts and Axios to populate the data in a line chart.</p>
  
  <p>I receive an error when I plot the JSON data from API response. Chart component renders when I add data manually but doesn't render when I use to load the data from API response. Sorry for mistakes or redundancies in code, I am new in the javascript programming world.</p>
  
  <p><strong>The error: <a href="https://i.stack.imgur.com/wwhwu.png" rel="nofollow noreferrer">chart not rendered image</a></strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import {Line, Bar} from 'react-chartjs-2';
  import axios from 'axios';
  
  class Chart extends Component{
      constructor(props){
          super(props);
          this.state = {
              chartData:{}
          }
      }
  
      componentDidMount(){
          this.getChartData();
      }
  
  
      getChartData(){
  
          var data_axios;
  
          //capturing the data from route
          // JSON data in route: [{"_id":"5e99c761f70bd25cccd6b3a8","Date":"21/04/2020 07:15:20","y1":"2100","y2":"2100","__v":0},{"_id":"5e8c865fcf1a8a4cf45d4a13","Date":"07/04/2020 14:20:59","y1":"1000","y2":"550","__v":0},{"_id":"5e8c865fcf1a8a4ce90d4a25","Date":"02/04/2020 09:00:02","y1":"300","y2":"550","__v":0}]
         axios.get("http://localhost:3000/person").then(res =&gt; {
  
              const value = res.data;
              let new_array = [];
  
             value.map(function(i){
                  new_array.push({
                      "Date": i.Date,
                      "y1": i.y1,
                  });
              })
  
              let y_array_1 = new_array.map(a =&gt; a.y1);
              let x_array_1 = new_array.map(a =&gt; a.Date);
  
  
              let y_array_2 = y_array_1.map(Number);
  
              this.setState({
                  chartData:{
                      labels: x_array_2,
                      datasets: [
                          {
                              label: "Data Y1",
                              data: y_array_2,
                          }
                      ]
                  }
              });
          });
      }
  
  
  
      render(){
          return(
              &lt;div className = "chart"&gt;
  
                  &lt;Line
                      data = {this.state.chartData}
                      width = {1200}
                      height = {600}
                      options={{
                          title:{
                              display: true,
                              text: 'Data Y1',
                              fontSize: 10
                          },
                          legend:{
                              display:true,
                              position: 'top'
                          }
                      }}
                   /&gt;
  
              &lt;/div&gt;
          )
      }
  }
  
  export default Chart;
  </code></pre>