[Chartjs]-Chart.js – How to show loading animation before plotting chart

It seems like you are basing yourself on the code shown on the animations callbacks part of the chartjs documentation.

That code is only partial. The link on the page is broken, but here is the correct full code: progress-bar example

The function defined on the onProgress attribute is called every step of the chart animation, and thus used to fill the progress bar. The progress variable that is giving you the undefined error should be defined previously on your code. On the github link it’s on line #26

The code you’re looking at there – the chart.js “progress bar” example, is for a progress bar during the animation as the chart is painted.

You need to have a progress bar whilst the data is loading, which is a different thing. Hence you are looking at the wrong code.

The animations in chart.js are animating the drawing of the charts, not the acquisition of the data, which is a user problem for which you’ll find lots of example code everywhere.