Vue 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.
- <template>
- <DxChart ... >
- <DxLoadingIndicator
- :enabled="true"
- />
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxLoadingIndicator
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxLoadingIndicator
- }
- }
- </script>
If you need to show or hide the loading indicator at runtime, call the showLoadingIndicator() or hideLoadingIndicator() method.
- <template>
- <DxChart
- ref="chart"
- ... >
- </DxChart>
- </template>
- <script>
- import DxChart from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart
- },
- methods: {
- showLoadingIndicator () {
- this.$refs.chart.instance.showLoadingIndicator();
- },
- hideLoadingIndicator () {
- this.$refs.chart.instance.hideLoadingIndicator();
- }
- }
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.