title: Is there any method to map or represent API data to Chart in ReactJS?
body: <p>I am using API data for showing it in a graphical representation using React Charts.
  The API data looks like:</p>
  <pre><code>0:
  CPSA: &quot;0.00&quot;
  CRSA: &quot;0.00&quot;
  XBA: &quot;0.00&quot;
  XSA: &quot;0.00&quot;
  audbal: &quot;1.00&quot;
  audnet: &quot;1.00&quot;
  date: &quot;2021-12-25T05:31:40.497Z&quot;
  xnaaud: &quot;0.0100000000&quot;
  xnabal: &quot;100.0000000000&quot;
  __v: 0
  _id: &quot;617d00f1e85e769931f42483&quot;
  [[Prototype]]: Object
  1:
  CPSA: &quot;11.81&quot;
  CRSA: &quot;40.95&quot;
  XBA: &quot;20.00&quot;
  XSA: &quot;0.00&quot;
  audbal: &quot;73.76&quot;
  audnet: &quot;72.76&quot;
  date: &quot;2021-12-25T06:11:14.824Z&quot;
  xnaaud: &quot;0.0119063760&quot;
  xnabal: &quot;6195.0000000000&quot;
  __v: 0
  _id: &quot;61c6b6025547fdf4cd6ecb6c&quot;
  </code></pre>
  <p>I want to map the xnaaud and date attributes onto the Chart.
  I am using code:</p>
  <pre><code>const [Data, setData] = useState([]);
      const data = {
              labels: [Data.date],
              datasets: [
                {
                  label: 'XNA/AUD',
                  fill: false,
                  lineTension: 0.0,
                  backgroundColor: 'rgb(41, 33, 116,0.5)',
                  borderColor: 'rgb(41, 33, 116,0.5)',
                  pointHitRadius: 20,
                  data:[parseFloat(Data.xnaaud)],
                },
              ]
            };
       useEffect(() =&gt; {
              async function fetchBooks() {
                const response = await fetch('/audlogget');
                const json = await response.json();
                setData(json.al);
                console.log(json.al)
            }
            fetchBooks();
        },[]);
      if(!Data)
      {
        return &lt;Loading/&gt;;
      }
        return (
          &lt;div className=&quot;chart&quot;&gt;
            &lt;Line data={data} /&gt;
          &lt;/div&gt;
        )
      }
  </code></pre>
  <p>But the issue is that the values are not representing in the graph. The graph shows nothing when uses API data but when giving static values to labels and data it is working.
  Whats the issue in the code?</p>