# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#nodata) property to `false`, customize the message text through the [`messages`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcustommessagescomponent) configuration, or provide a custom template using the [`kendoChartNoDataTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/nodatatemplatedirective) directive.

## When the Overlay Appears

The Chart displays a `"No data available"` overlay when no series data exists. The overlay appears when:

* The `data` array is empty.
* The `data` value is `null` or `undefined`.
* 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/data-binding/no-data-overlay/source.txt)

## Disabling the Overlay

To disable the overlay, set the [`noData`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#nodata) property to `false`.

```html
<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](https://www.telerik.com/kendo-angular-ui-develop/components/charts/globalization#messages).

```html
<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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/nodatatemplatedirective) directive inside the `<kendo-chart>` component.

```html
<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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/data-binding/no-data-template/source.txt)

## See Also

* [Binding to Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/data-binding/binding-series)
* [Grouping Data](https://www.telerik.com/kendo-angular-ui-develop/components/charts/data-binding/grouping)
* [Updating Data](https://www.telerik.com/kendo-angular-ui-develop/components/charts/data-binding/updating-data)