DevExtreme React - Loading Indicator
When the Chart visualizes local data, loading is instant. But when the Chart is bound to a remote data source, loading may take a considerable amount of time. To keep the viewer's attention, the Chart can display a loading indicator.
To activate the loading indicator, assign true to the loadingIndicator.show option. Once data is loaded, the loading indicator will be hidden automatically.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... loadingIndicator: { show: true } }); });
Angular
<dx-chart ... > <dxo-loading-indicator [show]="true"></dxo-loading-indicator> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
If you need to show or hide the loading indicator at runtime, call the showLoadingIndicator() or hideLoadingIndicator() method.
jQuery
var chart = $("#chartContainer").dxChart("instance"); chart.showLoadingIndicator(); chart.hideLoadingIndicator();
Angular
import { ..., ViewChild } from '@angular/core'; import { DxChartModule, DxChartComponent } from 'devextreme-angular'; // ... export class AppComponent { @ViewChild(DxChartComponent) chart: DxChartComponent; showLoadingIndicator () { this.chart.instance.showLoadingIndicator(); }; hideLoadingIndicator () { this.chart.instance.hideLoadingIndicator(); }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.