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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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",
},
},
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
No Visible Series Overlay Copy Link
A message is also displayed when all series are hidden:
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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 },
],
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
AnimationModule,
ContextMenuModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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" } },
},
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
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 { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
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 ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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,
},
},
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
{
overlays: {
noData: {
renderer: () => '<em>Custom message for <strong>missing data</strong></em>',
},
},
} Custom Loading Spinner Copy Link
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
AnimationModule,
ContextMenuModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-enterprise";
ModuleRegistry.registerModules([
AnimationModule,
CrosshairModule,
DataSourceModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
ContextMenuModule,
]);
const ChartExample = defineComponent({
template: `
<ag-charts
:options="options"
/>
`,
components: {
"ag-charts": AgCharts,
},
setup(props) {
const options = ref<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.justifyContent = "center";
container.style.alignItems = "center";
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 = "100px";
spinner.style.height = "100px";
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" } },
},
});
return {
options,
};
},
});
createApp(ChartExample).mount("#app");
{
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 Copy Link
Properties available on the AgChartOverlaysOptions interface.
- loading
AgChartOverlayOptions - An overlay to be displayed when there is no data.
- noData
AgChartOverlayOptions - An overlay to be displayed when there is no data.
- noVisibleSeries
AgChartOverlayOptions - An overlay to be displayed when there are no series visible.
- unsupportedBrowser
AgChartOverlayOptions - An overlay to be displayed when chart is running in an unsupported browser.
Properties available on the AgChartOverlaysOptions interface.
- loading
AgChartOverlayOptions - An overlay to be displayed when there is no data.
- noData
AgChartOverlayOptions - An overlay to be displayed when there is no data.
- noVisibleSeries
AgChartOverlayOptions - An overlay to be displayed when there are no series visible.
- unsupportedBrowser
AgChartOverlayOptions - An overlay to be displayed when chart is running in an unsupported browser.