[Bug]: Animations sporadically not working

[ajuvonen]

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

When a chart is created, it should be animated by default unless animations are disabled in the chart config. However, animations are sometimes not working out of the box. This occurs in the default sandbox on both Firefox and Chrome. In my own project, some charts animate and some don't, and I can't seem to pinpoint the issue.

I understand this might fall under the umbrella of "chart rendering issue", but I still wanted to open an issue about it for discussion, if this is a Vue- or Vue-chartjs -specific matter.

Reproduction

https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/bar

chart.js version

4.5.1

vue-chartjs version

5.3.3

Possible solution

No response

[apertureless]

I cant reproduce it in stackblitz. If i reload the page it animates every time.

[ajuvonen]

When I use the sandbox, the charts don't animate. However, oddly enough, if I make all the containers 100% height so the chart becomes larger, the animations return. I'm a little stumped with the issue.

[apertureless]

Tested with chrome and firefox.
Do you have any extensions that might cause this? Maybe try in inkognito/private window.

[ajuvonen]

Incognito doesn't work. I'm on Windows 11 myself. Somehow this seems to relate to the responsive option, and the chart container dimensions, because removing that option fixes it in some situations. Of course, if the chart otherwise requires the responsive option to exist, it's not always a valid solution. Another thing that does seem to fix this is adding a resizeDelay of 1ms to chart options. However, this makes all chartjs plugins crash. Maybe the issue is on chartjs end eventually.