Chart fade in from top left

[HavidDartmann]

Expected behavior

When I initialize my page and then switch the site focus to another chart, the chart should fade in from the bottom.

Current behavior

Anyways when I change the site focus the chart is fading in from the top left. I also found this problem in your documentations here.

Reproducible sample

https://www.chartjs.org/docs/4.4.0/configuration/animations.html

Optional extra steps/info to reproduce

When you first open the site and then click on the Hide and show [mode] button to change the chart it fades in from the top left and not as expected from the bottom.

Possible solution

No response

Context

I am trying to accomplish the normal fade in from the bottom when changing the site focus like in your documentation linked above but somehow it just does not work when first initializing it.

chart.js version

v4.4.0

Browser name and version

Microsoft Edge for Business Version 118.0.2088.61 (Official build) (64-bit)

Link to your project

No response

[LeeLenaleee]

This is working as expected, the hide and show animation set the target for appearing and disappearing to x: 0 and y:0 which is the topleft of the canvas

[HavidDartmann]

Are you sure? Here is the same phenomenon but without setting the values you mentioned.

When you go to the page and switch to the IMAGE chart it is also coming from the top left instead of doing the nice circle animation. Same thing happens when you then refresh the page and then go back to the COLOR chart.

[TobiTobsn007]

I have the same problem. Initial animation starts from the top left corner. Further data updates are animated correctly. Bars growing / shrinking. I am using the ng2-charts directive wich uses Charts.js 3.9.1. For me, it would be ok, when I would be able to disable the initial animation. But I like the update animation which I want to keep. Does anybody an idea how to solve it?

[ccrua]

same issue in v4.4.1

[Maxime-p]

Any news?

[agaev23]

Maybe someone has workaround for this behavior?