There are some options to display custom HTML over a chart.
Missing Data Overlay Copy Link
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 Link
A message is also displayed when all series are hidden:
Loading Data Overlay Copy Link
When using Asynchronous Loading, a loading data animation is shown while waiting for a response.
Unsupported Browser Overlay Copy Link
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 Link
Text Copy Link
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 Link
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 Link
{
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;
},
},
},
}