Loading animation while charts draw

[jrod091]

Hello all!

I'm trying to figure out how I can show a loading animation while the charts are being drawn. I thought the loader attribute, but I am still not seeing anything. I have 5 line charts that are all being drawn within the same component. Each chart has 4000+ data points so it takes a few seconds to render on my page. Below is what I have tried:

return (
      <div className={divClass}>
         <Chart chartType='LineChart' loader={<div><CircularProgress /></div>} options={latencyOptions} data={latencyData} />
         <Chart chartType='LineChart' loader={<div><CircularProgress /></div>} options={averageLatenciesOptions} data={averageLatenciesData} />
         <Chart chartType='LineChart' loader={<div><CircularProgress /></div>} options={peakLatenciesOptions} data={peakLatenciesData} />
         <Chart chartType='LineChart' loader={<div><CircularProgress /></div>} options={throughputOptions} data={throughputData} />
         <Chart chartType='LineChart' loader={<div><CircularProgress /></div>} options={iopsOptions} data={iopsData} />
      </div>
)

Note: CircularProgress is from material-ui library

Is my understanding of the loader attribute incorrect?

[AntwanSherif]

The loader prop is used while lazily-loading some js & css assets used by the chart.

For animations, you can add some configurations in the options object like this: animation: { duration: 1000, easing: 'out', startup: true }