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.
import {
AgChartOptions,
AgCharts,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const options: AgChartOptions = {
title: {
text: "A chart with missing data",
},
data: [],
series: [
{
type: "line",
xKey: "year",
yKey: "spending",
},
],
axes: {
y: { type: "number", title: { text: "Year" } },
x: { type: "number", title: { text: "Spending" } },
},
overlays: {
noData: {
text: "No data to display",
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
No Visible Series Overlay Copy Link
A message is also displayed when all series are hidden:
import {
AgChartOptions,
AgCharts,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const options: AgChartOptions = {
data: [
{ quarter: "Q1", petrol: 200, diesel: 100 },
{ quarter: "Q2", petrol: 300, diesel: 130 },
{ quarter: "Q3", petrol: 350, diesel: 160 },
{ quarter: "Q4", petrol: 400, diesel: 200 },
],
series: [
{ type: "line", xKey: "quarter", yKey: "petrol", visible: false },
{ type: "line", xKey: "quarter", yKey: "diesel", visible: false },
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
Loading Data Overlay Copy Link
When using Asynchronous Data, a loading data animation is shown while waiting for a response. The overlay can also be shown or hidden manually using the loading option. See Asynchronous Data â Manual Control for details.
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
dataSource: {
getData: () =>
new Promise(() => {
// Never resolve so the loading spinner remains
}),
},
series: [
{
type: "line",
xKey: "year",
yKey: "spending",
},
],
axes: {
y: { type: "number", title: { text: "Year" } },
x: { type: "number", title: { text: "Spending" } },
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
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:
import {
AgChartOptions,
AgCharts,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
const noDataOverlay = () => {
return [
"<div",
' style="',
" align-items: center;",
" background: hsl(45deg, 100%, 90%);",
" border: 2px solid hsl(0deg, 100%, 75%);",
" box-sizing: border-box;",
" color: black;",
" display: flex;",
" height: calc(100% - 16px);",
" justify-content: center;",
" margin: 8px;",
' "',
">",
" <em>Custom message for <strong>missing data</strong></em>",
"</div>",
].join("\n");
};
ModuleRegistry.registerModules([
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const options: AgChartOptions = {
title: {
text: "A chart with missing data",
},
data: [],
series: [
{
type: "line",
xKey: "year",
yKey: "spending",
},
],
axes: {
y: { type: "number", title: { text: "Year" } },
x: { type: "number", title: { text: "Spending" } },
},
overlays: {
noData: {
renderer: noDataOverlay,
},
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
{
overlays: {
noData: {
renderer: () => '<em>Custom message for <strong>missing data</strong></em>',
},
},
} Custom Loading Spinner Copy Link
import {
AgChartOptions,
AgCharts,
AnimationModule,
ContextMenuModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const options: AgChartOptions = {
dataSource: {
getData: () =>
new Promise(() => {
// Never resolve so the loading spinner remains
}),
},
overlays: {
loading: {
renderer: () => {
const container = document.createElement("div");
container.style.display = "flex";
container.style.alignItems = "flex-end";
container.style.justifyContent = "flex-start";
container.style.flexDirection = "column";
container.style.height = "100%";
container.style.boxSizing = "border-box";
container.style.userSelect = "none";
container.style.animation = "loading 250ms linear 50ms both";
const spinner = document.createElement("div");
spinner.style.width = "20px";
spinner.style.height = "20px";
spinner.style.backgroundImage = [
"linear-gradient(#333, #333)",
"linear-gradient(#999, #999)",
"linear-gradient(#ccc, #ccc)",
].join(", ");
spinner.style.backgroundPosition = "0% 0%, 0% 100%, 100% 100%";
spinner.style.backgroundSize = "50% 50%";
spinner.style.backgroundRepeat = "no-repeat";
spinner.style.animation = "loading-spinner 1s infinite";
const animation = document.createElement("style");
animation.innerText = [
"@keyframes loading { from { opacity: 0 } to { opacity: 1 } }",
"@keyframes loading-spinner {",
" 0% { background-position: 0% 0%, 0% 100%, 100% 100%; }",
" 25% { background-position: 100% 0%, 0% 0%, 0% 100%; }",
" 50% { background-position: 100% 100%, 100% 0%, 0% 0%; }",
" 75% { background-position: 0% 100%, 100% 100%, 100% 0%; }",
" 100% { background-position: 0% 0%, 0% 100%, 100% 100%; }",
"}",
].join(" ");
container.replaceChildren(spinner, animation);
return container;
},
},
},
series: [
{
type: "line",
xKey: "year",
yKey: "spending",
},
],
axes: {
y: { type: "number", title: { text: "Year" } },
x: { type: "number", title: { text: "Spending" } },
},
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
{
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;
},
},
},
}