Pie Chart scales even if animation.animateScale = false when the container go from display:none to display:block

[imabot2]

Expected behavior

Create a Pie Chart with this option: animation: { duration: 1000, animateRotate: true, animateScale: false }

If the Pie Chart is created inside a div with display:none (in my app, a Bootstrap Modal), when the div is set to display:block, the scale animation shouldn't run, and it does.

Here is a Code Pen with the problem : https://codepen.io/Fifi-Lulu/pen/jOdPXpZ

Current behavior

The chart runs the scale animation when the div is set to display:block event if animation.animateScale is set to false

Reproducible sample

https://codepen.io/Fifi-Lulu/pen/jOdPXpZ

Optional extra steps/info to reproduce

No response

Possible solution

Prevent the scale animation to run when the display style is changed from none to block

Context

My Pie Charts are in a Bootstrap Modal. When the modal is shown the first time, the charts are scaled and it's ugly.

chart.js version

v4.4.0

Browser name and version

Chrome Version 117.0.5938.88 (Official Build) (64-bit)

Link to your project

https://thememoriser.com

[etimberg]

I was going to suggest fixing the size of the container, but that doesn't seem to do it either. The root cause of this is likely something measuring the container to be 0x0 which then animates out. That's a different animation than the animateScale setting which would animate outward regardless of the canvas size

[cmcnulty]

I was playing around with this assuming that the transitions animations might change the behavior, e.g.:

... transitions: { show: { animation: { duration: 0 } } }, animation: { duration: 1000, ...

[cmcnulty]

However, setting transitions: false, seems to do the trick - perhaps needs more fiddling to determine exact option configuration to disable only 'show' animation

[gg-circlesarrows]

updates on this? v4.4.6

seems to be a similar issue to this

https://github.com/chartjs/Chart.js/issues/11550