Creating Chart.js using API data in react

Question

I am new to React, I dont really know how React hook works, here I encounter a problem. I tried to draw a chart using Chart.js and re draw it in specific interval using data from API, the problem is the chart does not read the data. This is the get data function:

const getData = async ()=>{
const response = await axiosJWT.get('http://localhost:5000/in-total-assets', {
  headers:{
    Authorization: `Bearer ${token}`
  }
})
var formated = [];
formated.push = response.data[0].Total_OR_Weight;
formated.push = response.data[0].Total_IN_Weight;
setData(formated)
}

And this is the chart renderer function:

async function getChart(){
await getData();
let config = {
  type: "doughnut",
  data: {
    labels: [
      "Organic",
      "Inorganic",
    ],
    datasets: [
      {
        label: 'Dataset',
        backgroundColor: ["#ed64a6", "#4c51bf"],
        data: data,
        hoverOffset: 5
      },
    ],
  }
};
let ctx = document.getElementById("doughnut-chart").getContext("2d");
window.myBar = new Chart(ctx, config);
}

And here is the useEffect function:

React.useEffect(() => {
refreshToken();
getChart();
const id = setInterval(getChart, 10000)
return ()=> clearInterval(id);
}, []);

The result is the chart show undefined as the value of the chart, any idea how to solve it?

Pepe Alvarez · Accepted Answer · 2021-12-13 06:07:59Z

Your html file in the part where you are going to draw the chart should look something like this:

<div class="canvasContainer" style="margin-top:20px; margin-bottom:20px;">
  <canvas id="doughnut-chart"></canvas>
</div>

The first think that come to my mind is if there is any data at all coming from your getData function, if data is flowing in then my next guess is that setData is not updating it in time by the time you decide to use the variable data in your code. I found this on a google search

State updates are asynchronous. This was true in class-based components. It's true with functions/Hooks

And

Even though they are asynchronous, the useState and setState functions do not return promises. Therefore we cannot attach a then handler to it or use async/await to get the updated state values

So, there it lays your problem. You need to redefine the part where you fetch the data and the part where you set your chart up, since the await part is not functioning like you think it is for hook functions. Something like this.

useEffect(() => {
  getData() // it handles the setting up the data variable part
}, []); // If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument.

useEffect(() => {
  refreshToken();
  getChart(); // it only sets the chart up, nothing else
}, [data]); // our component re-renders with every change on the var data

You can have as many useEffect blocks as you like and you can get rid off the part getContext("2d") from your ctx.

Collectives™ on Stack Overflow

Creating Chart.js using API data in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related