Doughnut - change in data does not sync with legend state when mutable method not used

[iammemon]

Expected behavior

When data is removed, the hidden state should also be removed for that item

Current behavior

hidden state remain the same and applied to the next item in the array

Reproducible sample

https://codesandbox.io/s/fragrant-framework-x8m8y?file=/App.tsx

Optional extra steps/info to reproduce

https://user-images.githubusercontent.com/33093657/152123594-17ea0628-ca76-4b55-b0bb-20fb6c1e63d1.mp4

Possible solution

No response

Context

I need the ability to pass new data directly to the chart without legend state going out of sync

I have a use case where I delete data in a component that does not have access to chart visualization and the other component shows the visualization (Doughnut chart) and it receives data via props. In this case, it creates a sync problem because I am not using the mutable methods and passing new data directly to the chart

chart.js version

v3.7.0

Browser name and version

No response

Link to your project

https://codesandbox.io/s/fragrant-framework-x8m8y?file=/App.tsx

[kurkle]

@iammemon when you replace the data and labels, how should Chart.js know what the relation of new data to old data? Labels?

I think in this kind of use case it would be best to handle the hidden state externally. For example: https://codesandbox.io/s/aged-architecture-4fy3v?file=/App.tsx

[iammemon]

@iammemon when you replace the data and labels, how should Chart.js know what the relation of new data to old data? Labels?

I was thinking maybe chart.js could use some unique key to map the label and data and internally do a check to see if any key is removed or added when the update method is called so we don't have to create a workaround for it

However, the example you added is a creative solution and works really nice for this use case