chartjs / chartjs/Chart.js

Animations are delayed with multiple datasets

Open
#10,081 4 comments 0 reactions 0 assignees View on GitHub
type: bug type: performance
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.