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

score 0 · Accepted Answer · answered Nov 10 '19 at 22:53

0

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.

answered Nov 10 '19 at 22:53

selmanbey

318
1
8

1

Yes, it was that, it was finally very simple but I could not see it, thank you very much, I am very grateful. – JUAN FERNANDO NARVAEZ GALLEGO Nov 10 '19 at 22:58

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

1 Answers1