React 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.

This message can be customised through overlays.noData:

overlays: {
    noData: {
        text: 'Some custom message',
    },
},

Example: Overlay for missing data

Example: Overlay for Missing Data

Custom Missing Data Overlay

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

overlays: {
    noData: {
        renderer: () => '<i class="no-data">The data is missing</i>'
    },
},

Example: Custom overlay for missing data

Example: Custom Overlay for Missing Data

API Reference

Properties available on the AgChartOverlaysOptions interface.

`noData`

AgChartOverlayOptions

An overlay to be displayed when there is no data.

noData: AgChartOverlayOptions;

interface AgChartOverlayOptions {
  // Text to render in the overlay. 
  text?: string;
  // A function for generating HTML string for overlay content. 
  renderer?: () => string;
}