---
title: "Overlays"
framework: angular
version: "14.1.0"
---

# Overlays

There are some options to display custom HTML over a chart.

## Missing Data Overlay

Sometimes end-users can be confused if a chart doesn't have any content. To help them understand that no data has been supplied, a message is displayed over the chart area.

#### Overlay for Missing Data

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Overlay for Missing Data](https://www.ag-grid.com/charts/angular/overlays/examples/no-data-plain)

## No Visible Series Overlay

A message is also displayed when all series are hidden:

#### No Visible Series

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: No Visible Series](https://www.ag-grid.com/charts/angular/overlays/examples/no-visible-series)

## Loading Data Overlay

When using [Asynchronous Data](https://www.ag-grid.com/charts/angular/async-data/), a loading data animation is shown while waiting for a response. The overlay can also be shown or hidden manually using the `loading` option. See [Asynchronous Data — Manual Control](https://www.ag-grid.com/charts/angular/async-data/#manual-control) for details.

#### Loading Data

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Loading Data](https://www.ag-grid.com/charts/angular/overlays/examples/loading)

## Unsupported Browser Overlay

When an [unsupported browser](https://www.ag-grid.com/charts/angular/supported-browsers/) is detected and the chart may not operate correctly, we display an overlay to make the user aware of this.

## Customisation

### Text

These messages can be customised through `overlays`:

```js
{
    overlays: {
        loading: {
            text: 'Some custom loading message',
        },
        noData: {
            text: 'Some custom noData message',
        },
        noVisibleSeries: {
            text: 'Some custom noVisibleSeries message',
        },
        unsupportedBrowser: {
            text: 'Some custom unsupportedBrowser message',
        },
    },
}
```

### Custom Overlay

If finer grained control is required, a renderer can be provided to allow full customisation:

#### Custom Overlay for Missing Data

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Custom Overlay for Missing Data](https://www.ag-grid.com/charts/angular/overlays/examples/no-data)

```js
{
    overlays: {
        noData: {
            renderer: () => '<em>Custom message for <strong>missing data</strong></em>',
        },
    },
}
```

### Custom Loading Spinner

#### Custom Overlay for Loading Data

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Custom Overlay for Loading Data](https://www.ag-grid.com/charts/angular/overlays/examples/loading-custom)

```js
{
    overlays: {
        loading: {
            renderer: () => {
                const container = document.createElement('div');
                // ... styles

                const spinner = document.createElement('div');
                // ... styles

                const animation = document.createElement('style');
                // ... keyframes

                container.append(spinner, animation);

                return container;
            },
        },
    },
}
```

## API Reference

#### Overlays

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| loading | AgChartOverlayOptions |  | An overlay to be displayed when there is no data. |
| loading.enabled | boolean | true | Enabled or disable use of the overlay. |
| loading.text | TextValue \| ContentSegment[] |  | Text to render in the overlay. Plain text, or an array of segments for rich content. |
| loading.renderer | Renderer |  | A function for generating HTML element or string for overlay content. |
| noData | AgChartOverlayOptions |  | An overlay to be displayed when there is no data. |
| noData.enabled | boolean | true | Enabled or disable use of the overlay. |
| noData.text | TextValue \| ContentSegment[] |  | Text to render in the overlay. Plain text, or an array of segments for rich content. |
| noData.renderer | Renderer |  | A function for generating HTML element or string for overlay content. |
| noVisibleSeries | AgChartOverlayOptions |  | An overlay to be displayed when there are no series visible. |
| noVisibleSeries.enabled | boolean | true | Enabled or disable use of the overlay. |
| noVisibleSeries.text | TextValue \| ContentSegment[] |  | Text to render in the overlay. Plain text, or an array of segments for rich content. |
| noVisibleSeries.renderer | Renderer |  | A function for generating HTML element or string for overlay content. |
| unsupportedBrowser | AgChartOverlayOptions |  | An overlay to be displayed when chart is running in an unsupported browser. |
| unsupportedBrowser.enabled | boolean | true | Enabled or disable use of the overlay. |
| unsupportedBrowser.text | TextValue \| ContentSegment[] |  | Text to render in the overlay. Plain text, or an array of segments for rich content. |
| unsupportedBrowser.renderer | Renderer |  | A function for generating HTML element or string for overlay content. |