Why is only a single chart of three updated with react-chartjs-2?

Question

It turns out that I have a modal, which contains a text field that records numerical values. Then the value that is recorded is passed through a loop to fill an arrangement with the amount that was recorded in the text field. After this the values ​​are sent to 3 graphs so that your data is updated.

The problem that occurs is that only the last graph is updated. I do not know what is happening because it seems that the other graphics if we receive the values, but not update them.

I am using material-ui and react-chartjs-2.

Please someone who can help me. Here I leave the code in StackBlitz, to see how it works.

Code in StackBlitz

Answer 1

I played a little bit with your code and it seems like in chart.js file, you need to move your var chartReference inside your main function ( function charts() ) for all three to update.

export default function charts(props) {
  var chartReference = {};
  useEffect (() => {
...

My guess is that when your chartReference is outside the function, it ends up referring to only one of your charts.