Javascript ChartsOverlays

ReactAngularVueJavascript

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.

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',
    },
},

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