Show spinner/loader till data is loaded completely.

[Manoj]

As data loading is taking time, and we wanted to refresh data in regular interval also, we needed a loader on chart element. could you please tell me how to apply that on angular chart component.

[Durga Gopalakrishnan]

Hi Manoj, 

Greetings from Syncfusion. 

We request you to use chart load and loaded event to show and hide the spinner. We have the remote data sample which displays spinner until data is fetched from server. Please check with the below snippet and sample. 

<div id='waitingpopup' class='waitingpopup' style="display: none"> 

        <span id='gif' class='image'></span> 

</div> 

public loadedChart(args: Chart): void { 

        let div: HTMLElement = document.getElementById('waitingpopup') as HTMLElement; 

        div.style.display = 'none'; 

}; 

public loadChart(args: ILoadedEventArgs): void { 

        let div: HTMLElement = document.getElementById('waitingpopup'); 

        div.style.display = 'block'; 

}; 

Online Demo : https://ej2.syncfusion.com/angular/demos/#/material/chart/remote-data 

Sample : https://stackblitz.com/edit/angular-fsc3ra 

Kindly revert us if you have any concerns. 

Regards,  

Durga G