title: How to use Axios API with Chart.js and React.js
body: <p>I fetched data using Axios and useEffect and want to display the it with Chart.js 
  but only the chart frame shows not the data.</p>
  
  <p>Below is my code</p>
  
  <pre><code> import React, { useState, useEffect } from "react";
   import { Bar, Line } from "react-chartjs-2";
  import axios from "axios";
  
  function ChartSix() {
  
    const [data, setData] = useState([]);
    const [posts, setPosts] = useState([]);
  
    let title = [];
    let id = [];
    useEffect(() =&gt; {
  
      axios.get("https://jsonplaceholder.typicode.com/posts").then(res =&gt; {
        const ipl = res.data;
        setPosts(ipl);
  
        ipl.forEach(record =&gt; {
          title.push(record.title);
          id.push(record.id);
        });
  
        setData({
          Data: {
            labels: title,
            datasets: [
              {
                label: "IPL 2018/2019 Top Run Scorer",
                data: id,
                backgroundColor: [
                  "#3cb371",
                  "#0000FF",
                  "#9966FF",
                  "#4C4CFF",
                  "#00FFFF",
                  "#f990a7",
                  "#aad2ed",
                  "#FF00FF",
                  "Blue",
                  "Red"
                ]
              }
            ]
          }
        });
      });
    });
  
    return (
      &lt;div&gt;
        &lt;Line data={data}&gt;&lt;/Line&gt;
      &lt;/div&gt;
    );
  }
  
  export default ChartSix;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/a2rA5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a2rA5.png" alt="enter image description here"></a></p>