All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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.

DevExtreme HTML5 JavaScript Charts LoadingIndicator

To activate the loading indicator, assign true to the loadingIndicator.show option. Once data is loaded, the loading indicator will be hidden automatically.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        loadingIndicator: {
            show: true
        }
    });
});
Angular
HTML
TypeScript
<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
JavaScript
var chart = $("#chartContainer").dxChart("instance");
chart.showLoadingIndicator();
chart.hideLoadingIndicator();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxChartModule, DxChartComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent;
    // Prior to Angular 8
    // @ViewChild(DxChartComponent) chart: DxChartComponent;
    showLoadingIndicator () {
        this.chart.instance.showLoadingIndicator();
    };
    hideLoadingIndicator () {
        this.chart.instance.hideLoadingIndicator();
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also