[BUG?] chart doesn't animate on first load?

[rhea-s]

Expected and Current Behavior

Hi - my chart's animations aren't appearing on first load. It works fine on second, third, etc. though.

Steps to Reproduce (for bugs)

Fiddle: https://jsfiddle.net/mjceb1xk/6/ as you can see, on first click of "generate report", the pie chart just appears. If you click again, the animations appear.

Any suggestions?

[etimberg]

@rhea-s this is likely because the chart has no size before it is shown the first time. One idea here could be to set the chart to responsive: false and give it a fixed size. That might get the animation to work

[avioli]

It animates fine... you are just fading in and missing the animation. You should read and understand jQuery's API, timing and asynchronous events.

Here I've explicitly set the fade-in duration and set/update the chart halfway through: https://jsfiddle.net/90x1f2bq/

[benmccann]

Please ask questions on Satckoverflow: https://stackoverflow.com/questions/tagged/chart.js

[mmh4all]

Don't use defer attribute to your chart script, i had the same problem in my app with Symfony and i use webpack in my Projekt , i set javascript attributes defer to false (in webpack_encore.yaml) and that's solved my problem

[ankitaivd]

In Donut Chart from"react-google-charts" onloading animation does not working