React Chart - 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.enabled property. When activated, the indicator will be displayed or hidden automatically as the chart's data is updated.
- import React from 'react';
- import Chart, {
- LoadingIndicator
- } from 'devextreme-react/chart';
- class App extends React.Component {
- render() {
- return (
- <Chart ... >
- <LoadingIndicator
- enabled={true}
- />
- </Chart>
- );
- }
- }
- export default App;
If you need to show or hide the loading indicator at runtime, call the showLoadingIndicator() or hideLoadingIndicator() method.
- import React from 'react';
- import Chart from 'devextreme-react/chart';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.chartRef = React.createRef();
- this.showLoadingIndicator = function() {
- this.chartRef.current.instance().showLoadingIndicator();
- }
- this.hideLoadingIndicator = function() {
- this.chartRef.current.instance().hideLoadingIndicator();
- }
- }
- render() {
- return (
- <Chart ref={this.chartRef} ... >
- </Chart>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.