React-chartjs-2: ChartJS mutates the state

Created on 7 Feb 2018 · 6Comments · Source: reactchartjs/react-chartjs-2

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.

Source

stuartsimpson

👍5

Most helpful comment

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.

openjck on 2 Mar 2018

👍6 ❤1 😄1

All 6 comments

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 on 8 Feb 2018

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 on 9 Feb 2018

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.

openjck on 2 Mar 2018

👍6 ❤1 😄1

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.

stuartsimpson on 6 Mar 2018

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.