No Data Overlay
The Chart displays a "No data available" overlay when all series have empty, null, or undefined data. Disable the overlay by setting the noData property to false, customize the message text through the messages configuration, or provide a custom template using the kendoChartNoDataTemplate directive.
When the Overlay Appears
The Chart displays a "No data available" overlay when no series data exists. The overlay appears when:
- The
dataarray is empty. - The
datavalue isnullorundefined. - All series have no data.
The following example shows the default no data overlay in action. Toggle the data availability to see when the overlay appears and disappears.
Disabling the Overlay
To disable the overlay, set the noData property to false.
<kendo-chart [noData]="false">
<kendo-chart-series>
<kendo-chart-series-item [data]="[]"></kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>Customizing the Message
To customize the message text, see Customizing Messages.
<kendo-chart>
<kendo-chart-messages noData="Custom no data message"></kendo-chart-messages>
<kendo-chart-series>
<kendo-chart-series-item [data]="[]"></kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>Custom Overlay Template
To define a custom overlay, nest an <ng-template> element with the kendoChartNoDataTemplate directive inside the <kendo-chart> component.
<kendo-chart>
<ng-template kendoChartNoDataTemplate>
<div class="custom-no-data">
<h3>No Data Available</h3>
<p>Try adjusting your filters or check back later.</p>
</div>
</ng-template>
<kendo-chart-series>
<kendo-chart-series-item [data]="[]"></kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>The following example shows a custom no data template with styled content and an action button. Click Load data to populate the Chart and see the overlay disappear.