Animations are delayed with multiple datasets

[ClementVH]

Expected behavior

All the datasets should be animated together

Current behavior

The animations of the datasets start with a delay

Reproducible sample

https://codepen.io/ClementVH/pen/vYeredE

Optional extra steps/info to reproduce

In the codepen there is a button below the chart, if you click it ( fast enough ) you will see the stacked bars are not aligned during the animation. It looks like a glitch.

Possible solution

I have looked into the code and I saw that each Animation init its start with a new Date.now(). However when you have "large" datasets and you update the min/max, the animations start time will be different from one datasets to an other.

The start time of the animation should be the same for every element of the chart. Probably created in the update function of the chart.

I can submit a PR with a rough fix and we can iterate on that if you'd like

Context

We use chart.js in our company to display temperature, electricity consumption, etc... and we developed a "plugin" that allows the user to pan the chart. ( We didn't use chartjs-plugin-zoom because it doesn't fit our needs )

It used to work well in chartjs v2, here is the same codepen in this version : https://codepen.io/ClementVH/pen/rNGKbOx

chart.js version

v3.7.0

Browser name and version

Chrome v95

Link to your project

No response

[etimberg]

This is likely because separate animations are used under the hood for each dataset. I tagged this as a performance problem since making things faster will reduce the likelihood that this problem is seen.

@kurkle @LeeLenaleee any thoughts on this?

[jzhou891]

Any updates on this?

[form3]

@etimberg Is there any thoughts into fixing this issue ?