Chart.js
Chart.js copied to clipboard
chartjs
Animations are delayed with multiple datasets
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
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?
