opened
ottworks
username_0
Reproduction: https://codesandbox.io/s/react-chartjs-2-example-9zp80?file=/src/index.js

Expected behavior: Clicking the button twice returns the chart to how it was initially.

Observed behavior: Clicking the button twice puts the chart into a mixed state between before and after.

It looks like memoizeDataProps isn't doing a thorough enough clone of the data prop. Replacing the function body with `return JSON.parse(JSON.stringify(this.props.data))` seems to fix the issue somewhat.
Data props getting mutated between prop changes
issue
created
typpo
username_1
Each dataset needs a unique key. By default, the `label` property on each dataset is used. Alternatively, you may provide a `datasetKeyProvider` as a prop that returns a unique key.

In this case, you could add something like this to your `Line` chart because each dataset has a unique label/borderColor combination):
```
datasetKeyProvider={dataset => `${dataset.label}__${dataset.borderColor}`}
```

https://codesandbox.io/s/react-chartjs-2-example-j8il1

More generally, you could also serialize the data, combine other keys, etc - whatever suits your case.

Hope this helps.
comment
created
ottworks
username_0
They are the same datasets, so they have the same labels. The differences in properties are to be animated between when pressing the button, which does not work correctly.
comment
created
owen-duncan-snobel
username_2
I have a fix for you. All you need to add to the line component is 'redraw' it forces a reset of the canvas and will fix the behaviour check out the code pen.

https://codesandbox.io/s/react-chartjs-2-example-cn8dl?file=/src/index.js
<Line  redraw/>
comment
created
ottworks
username_0
That will break animated transitions between graphs.
comment
created
owen-duncan-snobel
username_2
Okay, I understand. Well when you are swapping between the two you set background colour for one and border colour for the other so I added a blank border colour attribute to the first dataset and it will reset it to null on each switch.

https://codesandbox.io/s/react-chartjs-2-example-cn8dl?file=/src/index.js

Let me know if this is the intended behaviour.
comment
created
maxwell-oroark
username_3
Perhaps even more alarmingly, pollution of props also occurs when the length of the data array being passed changes. I have two time series datasets that render conditionally based on a prop, when I initially load dataset A the chart has the correct amount of data points being rendered on the map. props update to render dataset B and the chart updates to the correct new amount of data points, go back to dataset A and the chart tries to fit the data into the length of dataset B. I'll try and create a sandbox to illustrate.

Will also try this datasetKeyProvider thing and see if that rectifies.
comment
created
maxwell-oroark
username_3
Does anyone know why this code sandbox doesn't update the Line chart at all?
https://codesandbox.io/s/react-chartjs-2-example-forked-pb84t?fontsize=14&hidenavigation=1&theme=dark
comment
created
owen-duncan-snobel
username_2
You have to add the prop "redraw" to the component ex. <Line redraw options={...} />  It is just the behaviour of how the canvas works at the time of the component mounting in react.
comment