JavaScript ChartsOverlays

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

Missing Data Overlay Copy

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.

No Visible Series Overlay Copy

A message is also displayed when all series are hidden:

Loading Data Overlay Copy

When using Asynchronous Loading, a loading data animation is shown while waiting for a response.

Unsupported Browser Overlay Copy

When an unsupported browser is detected and the chart may not operate correctly, we display an overlay to make the user aware of this.

Customisation Copy

Text Copy

These messages can be customised through overlays:

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 Copy

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

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

Custom Loading Spinner Copy

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 Copy