Creating a Chart with a Loading Indicator
Environment
| Product | Progress® Kendo UI for Angular Chart |
Description
How can I display a loader while Chart data is being fetched? I want to show a loading message until the data load is complete, and then show a "No data available" message if the data load is complete but no data exists.
This Knowledge Base article also answers the following questions:
- How can I display a loader while Chart data is being fetched?
- How can I use the no-data template to show a loading state?
- How can I integrate a Kendo UI Loader with Chart using templates?
Solution
-
Use the
kendoChartNoDataTemplatedirective to define a custom template that displays when the Chart has no data. -
Inside the template, use the
@ifcontrol flow to conditionally render either:- A Kendo UI Loader component with a loading message when data is being fetched
- A "No data available" message when the data load is complete but no data exists
-
Toggle a
loadingPanelVisibleproperty to control which state to display in the template.
This approach ensures the loading indicator is properly rendered within the Chart's template system and not hidden by the Chart's internal overlays.
The following example shows the full implementation of the demonstrated approach.