[Bug]: Bar Chart with multiple dataset stacks reanimating when data changes

[MigdaliaBrito]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I see this only occur with bar charts with data sets that have multiple stack ids. But when the data changes, it does not animate gracefully the difference for the stacks. It does for the first stack collection, but the rest it resets the animation. I found an example in the chartjs documentation that does what I expect it to do but when using react-chartjs-2 it does not replicate the expected behavior.

https://www.chartjs.org/docs/latest/samples/bar/stacked-groups.html

Reproduction

https://codesandbox.io/p/devbox/silly-aj-gqvwvr?file=%2FApp.tsx%3A60%2C16&workspaceId=d2c104b9-4ce0-406f-9621-548a17948260

chart.js version

4.0.0

react-chartjs-2 version

5.0.0

Possible solution

No response

[rafrocha]

+1

[MigdaliaBrito]

Some additional context around the use case: We have a component that changes data inside of the dataset. Its just a state update. I would think this to be handled by the library.

[MigdaliaBrito]

In the codesandbox I modified it to do this:

  const handleClick = () => {
    const chart = chartRef.current;

    if (chart) {
      chart.data.datasets.forEach((dataset) => {
        dataset.data = labels.map(() => Math.floor(Math.random() * 201) - 100);
      });
      chart.update();
    }
  };

Updating the data directly seems to prevent this but I am thinking react-chartjs-2 should be smart enough to handle state changes and change appropriately.

[MigdaliaBrito]

Hmm after further investigation if I just modify the data inside the dataset (not through chart update) then it behaves as expected. Perhaps this is not a library issue just how the data is architected to be passed down to the chart. Also my code link has been modified to include the version where the data changes smoothly

[MigdaliaBrito]

I believe the issue we face likely can be solved as it was solved before here: https://github.com/reactchartjs/react-chartjs-2/issues/648

I think perhaps the addition of two stacks confuses the library?

[MigdaliaBrito]

Original sandbox example with the animation bounce: https://codesandbox.io/p/devbox/green-wood-sxw48y?workspaceId=d2c104b9-4ce0-406f-9621-548a17948260