JavaScript ChartsOverlays

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.

No Visible Series Overlay

A message is also displayed when all series are hidden:

Loading Data Overlay

When using Async Zoom, a loading data animation is shown while waiting for a response.

Unsupported Browser Overlay

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

Text

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

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

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