ChartJS mutates the state

[stuartsimpson]

After passing the chart data to the component for rendering, the chart.js graph mutates the data object and creates a recursive problem when doing a JSON.stringify to the data object. It is easy to recreate the problem. after the chart has rendered try and stringify the data object.

[openjck]

Can you post an simple example? I'm not a developer on this project, but I'm seeing something similar and I'm wondering if we're hitting the same issue.

[openjck]

I've put together a simple demo of this bug. See the project README for instructions for installing and running the demo:

https://github.com/openjck/bug-demo-react-chartjs-2-mutates-state

[openjck]

Any update on this?

Here's a quick workaround. If you're passing a data variable to react-chartjs-2, do this first:

data = JSON.parse(JSON.stringify(data));

We did this on my project. It's obviously not good for performance, but it works.

[stuartsimpson]

This is this the same workaround I ended up using. I ended up holding two copies of the data one that i would keep up to date with RactJS and one that I would pass to React-Chartjs. The issue is that react-chartjs needs to graph the chart without mutating the data.

[jerairrest]

This is a known issue with chart.js.

https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L125-L128

I'm not entirely sure what we can do about this since it's the core of chart.js is making this change.

[Pringels]

Closing for now. If this problem persists with the latest versions of both libraries then please feel free to reopen