This page covers the category Legend. For the Gradient Legend see the Colour Scale page.
A Legend aids in matching visual elements in the chart to their corresponding series or data categories.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AgChartLegendPlacement,
AgChartLegendPositionOptions,
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<
AgCartesianChartOptions & {
legend: { position: AgChartLegendPositionOptions };
}
>({
data: getData(),
series: [
{
type: "bar",
xKey: "quarter",
yKey: "naturalGas",
yName: "Natural gas",
},
{
type: "bar",
xKey: "quarter",
yKey: "coal",
yName: "Coal",
},
{
type: "bar",
xKey: "quarter",
yKey: "primaryOil",
yName: "Primary oil",
},
{
type: "bar",
xKey: "quarter",
yKey: "petroleum",
yName: "Petroleum",
},
{
type: "bar",
xKey: "quarter",
yKey: "manufacturedFuels",
yName: "Manufactured fuels",
},
],
legend: {
position: {
placement: "right",
},
},
});
const updateLegendPlacement = (value: AgChartLegendPlacement) => {
const nextOptions = clone(options);
nextOptions.legend!.position!.placement = value;
setOptions(nextOptions);
};
const legendChange = (event: Event) => {
const nextOptions = clone(options);
const enabled = (event.target as HTMLInputElement).value === "show";
const legendPlacementGroup = document.getElementById(
"legendPlacementGroup",
) as HTMLFieldSetElement;
legendPlacementGroup.disabled = !enabled;
nextOptions.legend!.enabled = enabled;
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<div
className="button-group gap-right"
role="group"
aria-label="Legend"
>
<input
type="radio"
id="legend-show"
name="legend-enabled"
defaultValue="show"
defaultChecked
onChange={(event) => legendChange(event)}
/>
<label htmlFor="legend-show">Show Legend</label>
<input
type="radio"
id="legend-hide"
name="legend-enabled"
defaultValue="hide"
onChange={(event) => legendChange(event)}
/>
<label htmlFor="legend-hide">Hide Legend</label>
</div>
<fieldset id="legendPlacementGroup" className="control-group">
<label htmlFor="legend-placement">Legend Placement:</label>
<select
id="legend-placement"
onChange={(event) => updateLegendPlacement(event.target.value)}
>
<option value="right">right</option>
<option value="right-top">right-top</option>
<option value="right-bottom">right-bottom</option>
<option value="left">left</option>
<option value="left-top">left-top</option>
<option value="left-bottom">left-bottom</option>
<option value="top">top</option>
<option value="top-right">top-right</option>
<option value="top-left">top-left</option>
<option value="bottom">bottom</option>
<option value="bottom-right">bottom-right</option>
<option value="bottom-left">bottom-left</option>
</select>
</fieldset>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
return [
{
quarter: "Q1",
coal: -666,
manufacturedFuels: -14,
primaryOil: -261,
petroleum: -124,
naturalGas: -1197,
},
{
quarter: "Q2",
coal: 208,
manufacturedFuels: 71,
primaryOil: 950,
petroleum: -318,
naturalGas: 906,
},
{
quarter: "Q3",
coal: 426,
manufacturedFuels: 19,
primaryOil: -845,
petroleum: 166,
naturalGas: 276,
},
{
quarter: "Q4",
coal: 158,
manufacturedFuels: -29,
primaryOil: -156,
petroleum: -19,
naturalGas: 672,
},
];
}
A Legend is made up of multiple 'items', each of which consists of a 'marker' and a 'label'.
By default, a Legend is displayed below all charts containing more than one series. This can be changed by using the legend.enabled property.
Layout Copy Link
The Legend is placed below the series area by default. Use the position property to change this.
Placement Copy Link
The position property accepts either a string specifying one of the nine preset positions, or an object for more control including Floating, and Offsets.
{
legend: {
position: 'bottom', // 'top', 'right', 'left', 'top-right', 'right-top' ...
},
}{
legend: {
position: {
placement: 'bottom', // 'top', 'right', 'left', 'top-right', 'right-top' ...,
//other floating or offset options
},
},
}Notice that when you change the legend position in the example above:
- The size and position of the Series Area changes to accommodate the Legend within the container.
- The default
orientationof the Legend changes.- A
verticalorientation - with the items arranged in columns - when the Legend is positioned to the sides. - A
horizontalorientation - with the items arranged in rows - when the Legend is positioned to above or below.
- A
Floating Copy Link
By default, the Legend occupies space next to the Series Area and affects the chart Layout.
The Legend can be drawn above the Series Area using the floating: true property. This will display the Legend above the data and all other chart elements.
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
BarSeriesModule,
CategoryAxisModule,
LegendModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
ModuleRegistry.registerModules([
BarSeriesModule,
CategoryAxisModule,
LegendModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: { text: "Yearly Dividend Yields by Stock" },
data: [
{ ticker: "AAPL", "2020": 0.7, "2021": 0.6, "2022": 0.5 },
{ ticker: "KO", "2020": 3.0, "2021": 2.9, "2022": 2.8 },
{ ticker: "JNJ", "2020": 2.6, "2021": 2.5, "2022": 2.4 },
{ ticker: "T", "2020": 6.5, "2021": 7.0, "2022": 6.0 },
{ ticker: "PG", "2020": 2.3, "2021": 2.2, "2022": 2.1 },
],
series: [
{
type: "bar",
direction: "horizontal",
xKey: "ticker",
yKey: "2020",
},
{
type: "bar",
direction: "horizontal",
xKey: "ticker",
yKey: "2021",
},
{
type: "bar",
direction: "horizontal",
xKey: "ticker",
yKey: "2022",
},
],
axes: {
y: {
type: "category",
title: { text: "Stock Ticker" },
},
x: {
type: "number",
title: { text: "Dividend Yield (%)" },
label: { format: "#{.0f}%" },
},
},
legend: {
position: {
placement: "right-top",
floating: true,
xOffset: -50,
yOffset: 75,
},
border: {
enabled: true,
},
fill: "beige",
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
{
legend: {
position: {
placement: 'right-top', // start at the right-top
floating: true, // place the legend above the series area
xOffset: -50, // move the legend 50 pixels left
yOffset: 75, //move the legend 75 pixels down
},
},
} Offset and Spacing Copy Link
It is possible to manually offset the position of the Legend, as well as controlling the spacing between the Legend and Series Area.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AgChartLegendPositionOptions,
BarSeriesModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
BarSeriesModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<
AgCartesianChartOptions & {
legend: { position: AgChartLegendPositionOptions };
}
>({
title: {
text: "Financial Overview (1990–2025)",
fontSize: 18,
},
subtitle: {
text: "Values in millions of €",
},
data: getData(),
series: [
{
type: "bar",
xKey: "year",
yKey: "assets",
yName: "Assets",
stacked: true,
fill: "#4caf50",
},
{
type: "bar",
xKey: "year",
yKey: "liabilities",
yName: "Liabilities",
stacked: true,
fill: "#f44336",
},
{
type: "line",
xKey: "year",
yKey: "netWorth",
yName: "Net Worth",
stroke: "#1a1a1a",
marker: { enabled: true, fill: "#1a1a1a" },
},
],
axes: {
x: {
type: "unit-time",
title: {
text: "Year",
},
},
y: {
type: "number",
title: {
text: "Millions of €",
},
},
},
legend: {
spacing: 20,
position: {
placement: "right",
xOffset: 0,
yOffset: 0,
},
},
});
const updateLegendSpacing = (event: any) => {
const nextOptions = clone(options);
var value = +event.target.value;
nextOptions.legend!.spacing = +event.target.value;
document.getElementById("spacingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendXOffset = (event: any) => {
const nextOptions = clone(options);
var value = event.target.value;
nextOptions.legend!.position.xOffset = +event.target.value;
document.getElementById("xOffsetValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendYOffset = (event: any) => {
const nextOptions = clone(options);
var value = +event.target.value;
nextOptions.legend!.position.yOffset = +event.target.value;
document.getElementById("yOffsetValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label htmlFor="spacingLabel">
<code>spacing:</code>
</label>
<input
type="range"
id="spacingLabel"
min="0"
max="75"
defaultValue="20"
onInput={(event) => updateLegendSpacing(event)}
onChange={(event) => updateLegendSpacing(event)}
/>
<span id="spacingValue" className="gap-right">
20
</span>
</div>
<div className="controls-row">
<label htmlFor="xOffsetLabel">
<code>xOffset:</code>
</label>
<input
type="range"
id="xOffsetLabel"
min="-100"
max="100"
defaultValue="0"
onInput={(event) => updateLegendXOffset(event)}
onChange={(event) => updateLegendXOffset(event)}
/>
<span id="xOffsetValue">0</span>
</div>
<div className="controls-row">
<label htmlFor="yOffsetLabel">
<code>yOffset:</code>
</label>
<input
type="range"
id="yOffsetLabel"
min="-150"
max="150"
defaultValue="0"
onInput={(event) => updateLegendYOffset(event)}
onChange={(event) => updateLegendYOffset(event)}
/>
<span id="yOffsetValue">0</span>
</div>
</div>
<AgCharts options={options} className="chart" />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
const data: {
year: Date;
assets: number;
liabilities: number;
netWorth?: number;
}[] = [
{ year: new Date(1990, 1, 1), assets: 520, liabilities: -310 },
{ year: new Date(1991, 1, 1), assets: 547, liabilities: -325 },
{ year: new Date(1992, 1, 1), assets: 565, liabilities: -335 },
{ year: new Date(1993, 1, 1), assets: 590, liabilities: -342 },
{ year: new Date(1994, 1, 1), assets: 612, liabilities: -351 },
{ year: new Date(1995, 1, 1), assets: 603, liabilities: -362 },
{ year: new Date(1996, 1, 1), assets: 627, liabilities: -373 },
{ year: new Date(1997, 1, 1), assets: 659, liabilities: -387 },
{ year: new Date(1998, 1, 1), assets: 678, liabilities: -402 },
{ year: new Date(1999, 1, 1), assets: 701, liabilities: -419 },
{ year: new Date(2000, 1, 1), assets: 738, liabilities: -437 },
{ year: new Date(2001, 1, 1), assets: 715, liabilities: -455 },
{ year: new Date(2002, 1, 1), assets: 744, liabilities: -471 },
{ year: new Date(2003, 1, 1), assets: 777, liabilities: -486 },
{ year: new Date(2004, 1, 1), assets: 790, liabilities: -495 },
{ year: new Date(2005, 1, 1), assets: 812, liabilities: -506 },
{ year: new Date(2006, 1, 1), assets: 843, liabilities: -521 },
{ year: new Date(2007, 1, 1), assets: 870, liabilities: -534 },
{ year: new Date(2008, 1, 1), assets: 856, liabilities: -543 },
{ year: new Date(2009, 1, 1), assets: 872, liabilities: -559 },
{ year: new Date(2010, 1, 1), assets: 894, liabilities: -570 },
{ year: new Date(2011, 1, 1), assets: 920, liabilities: -583 },
{ year: new Date(2012, 1, 1), assets: 951, liabilities: -599 },
{ year: new Date(2013, 1, 1), assets: 973, liabilities: -614 },
{ year: new Date(2014, 1, 1), assets: 990, liabilities: -627 },
{ year: new Date(2015, 1, 1), assets: 1021, liabilities: -641 },
{ year: new Date(2016, 1, 1), assets: 1056, liabilities: -658 },
{ year: new Date(2017, 1, 1), assets: 1078, liabilities: -668 },
{ year: new Date(2018, 1, 1), assets: 1102, liabilities: -682 },
{ year: new Date(2019, 1, 1), assets: 1135, liabilities: -701 },
{ year: new Date(2020, 1, 1), assets: 1172, liabilities: -720 },
{ year: new Date(2021, 1, 1), assets: 1155, liabilities: -738 },
{ year: new Date(2022, 1, 1), assets: 1180, liabilities: -749 },
{ year: new Date(2023, 1, 1), assets: 1209, liabilities: -763 },
{ year: new Date(2024, 1, 1), assets: 1243, liabilities: -778 },
{ year: new Date(2025, 1, 1), assets: 1270, liabilities: -792 },
];
data.forEach((d) => (d.netWorth = d.assets + d.liabilities));
return data;
}
{
legend: {
spacing: 20,
position: {
placement: 'right',
xOffset: 0,
yOffset: 0,
},
},
}In this example:
- The
xOffsetandyOffsetvalues move the Legend relative to its original position. This does not affect the overall size of the Series Area. - The
spacingvalue adjusts the spacing between the Series Area and Legend, and shrinks the Series Area.- Note that the
spacingoption will have no effect iffloating: true.
- Note that the
Size Copy Link
By default, the overall width and height of the Legend will be a percentage of the chart's width and height.
The Legend width and height can be constrained using the legend.maxWidth and legend.maxHeight properties. The Legend will always contain at least one row or column of items.
Padding Copy Link
It is possible to add padding between and within the Legend items.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgPolarChartOptions,
LegendModule,
ModuleRegistry,
PieSeriesModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([LegendModule, PieSeriesModule]);
const ChartExample = () => {
const [options, setOptions] = useState<AgPolarChartOptions>({
data: getData(),
series: [
{
type: "pie",
angleKey: "value",
calloutLabelKey: "label",
},
],
legend: {
maxHeight: 200,
item: {
maxWidth: 130,
padding: { top: 4, right: 16, bottom: 4, left: 16 },
marker: {
padding: 8,
},
},
},
});
const updateLegendItemPaddingLeft = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
if (typeof nextOptions.legend!.item!.padding === "object") {
nextOptions.legend!.item!.padding!.left = value;
}
document.getElementById("leftPaddingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendItemPaddingRight = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
if (typeof nextOptions.legend!.item!.padding === "object") {
nextOptions.legend!.item!.padding!.right = value;
}
document.getElementById("rightPaddingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendItemPaddingTop = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
if (typeof nextOptions.legend!.item!.padding === "object") {
nextOptions.legend!.item!.padding!.top = value;
}
document.getElementById("topPaddingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendItemPaddingBottom = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
if (typeof nextOptions.legend!.item!.padding === "object") {
nextOptions.legend!.item!.padding!.bottom = value;
}
document.getElementById("bottomPaddingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendItemSpacing = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
nextOptions.legend!.item!.marker!.padding = value;
document.getElementById("markerPaddingValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
const updateLegendItemMaxWidth = (event: any) => {
const nextOptions = clone(options);
const value = Number(event.target.value);
nextOptions.legend!.item!.maxWidth = value;
document.getElementById("maxWidthValue")!.innerHTML = String(value);
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<label htmlFor="leftPaddingLabel">
<code>item.padding.left:</code>
</label>
<input
type="range"
id="leftPaddingLabel"
min="0"
max="25"
defaultValue="16"
onInput={(event) => updateLegendItemPaddingLeft(event)}
onChange={(event) => updateLegendItemPaddingLeft(event)}
/>
<span id="leftPaddingValue" className="gap-right">
16
</span>
<label htmlFor="rightPaddingLabel">
<code>item.padding.right:</code>
</label>
<input
type="range"
id="rightPaddingLabel"
min="0"
max="25"
defaultValue="16"
onInput={(event) => updateLegendItemPaddingRight(event)}
onChange={(event) => updateLegendItemPaddingRight(event)}
/>
<span id="rightPaddingValue" className="gap-right">
16
</span>
</div>
<div className="controls-row">
<label htmlFor="topPaddingLabel">
<code>item.padding.top:</code>
</label>
<input
type="range"
id="topPaddingLabel"
min="0"
max="15"
defaultValue="4"
onInput={(event) => updateLegendItemPaddingTop(event)}
onChange={(event) => updateLegendItemPaddingTop(event)}
/>
<span id="topPaddingValue">4</span>
<label htmlFor="bottomPaddingLabel">
<code>item.padding.bottom:</code>
</label>
<input
type="range"
id="bottomPaddingLabel"
min="0"
max="15"
defaultValue="4"
onInput={(event) => updateLegendItemPaddingBottom(event)}
onChange={(event) => updateLegendItemPaddingBottom(event)}
/>
<span id="bottomPaddingValue">4</span>
</div>
<div className="controls-row">
<label htmlFor="markerPaddingLabel">
<code>item.marker.padding:</code>
</label>
<input
type="range"
id="markerPaddingLabel"
min="0"
max="30"
defaultValue="8"
onInput={(event) => updateLegendItemSpacing(event)}
onChange={(event) => updateLegendItemSpacing(event)}
/>
<span id="markerPaddingValue">8</span>
</div>
<div className="controls-row">
<label htmlFor="maxWidthLabel">
<code>item.maxWidth:</code>
</label>
<input
type="range"
id="maxWidthLabel"
min="0"
max="130"
defaultValue="130"
onInput={(event) => updateLegendItemMaxWidth(event)}
onChange={(event) => updateLegendItemMaxWidth(event)}
/>
<span id="maxWidthValue">130</span>
</div>
</div>
<AgCharts options={options} className="chart" />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
return [
{ label: "USA", value: 56.9 },
{ label: "UK", value: 22.5 },
{ label: "China", value: 6.8 },
{ label: "Russia", value: 8.5 },
{ label: "India", value: 2.6 },
{ label: "Germany", value: 18.2 },
{ label: "France", value: 12.5 },
{ label: "Canada", value: 3.9 },
{ label: "Spain", value: 7.9 },
{ label: "South Africa", value: 21.9 },
];
}
{
legend: {
item: {
maxWidth: 130,
padding: {
top: 4,
right: 16,
bottom: 4,
left: 16,
},
marker: {
padding: 8,
},
},
},
} Series Stroke Copy Link
The Legend item includes a line, representing the stroke style of the series. Use showSeriesStroke to disable this.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AreaSeriesModule,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import clone from "clone";
ModuleRegistry.registerModules([
AreaSeriesModule,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: [
{ month: "Jan", price: 148.9, volume: 2.5 },
{ month: "Feb", price: 153.4, volume: 3.1 },
{ month: "Mar", price: 155.75, volume: 2.8 },
{ month: "Apr", price: 158.9, volume: 4.2 },
{ month: "May", price: 160.6, volume: 5.5 },
{ month: "Jun", price: 158.45, volume: 3.7 },
{ month: "Jul", price: 162.3, volume: 4.9 },
{ month: "Aug", price: 165.8, volume: 6.2 },
{ month: "Sep", price: 168.5, volume: 7.8 },
{ month: "Oct", price: 170.25, volume: 5.4 },
{ month: "Nov", price: 172.1, volume: 6.7 },
{ month: "Dec", price: 169.75, volume: 4.3 },
],
series: [
{
type: "area",
xKey: "month",
yKey: "volume",
yName: "Trading Volume",
yKeyAxis: "ySecondary",
strokeWidth: 2,
marker: { enabled: true },
},
{
type: "line",
xKey: "month",
yKey: "price",
yName: "Closing Price",
lineDash: [3, 3],
marker: { enabled: false },
},
],
axes: {
y: {
type: "number",
position: "left",
title: { text: "Closing Price" },
},
ySecondary: {
type: "number",
position: "right",
title: { enabled: true, text: "Trading Volume" },
},
},
legend: {
item: {
showSeriesStroke: true,
},
},
});
const toggleSeriesStroke = () => {
const nextOptions = clone(options);
nextOptions.legend!.item!.showSeriesStroke =
!nextOptions.legend!.item!.showSeriesStroke;
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
<button onClick={toggleSeriesStroke}>Toggle Series Stroke</button>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
{
legend: {
item: {
showSeriesStroke: false,
},
},
}In this configuration:
- The stroke styling of the series is shown as a line in the Legend item.
- Legend item markers are only shown if the series has markers enabled.
Pagination Copy Link
If the Legend items don't fit within the size constraints, the items are paginated and the pagination component is displayed.
In this example legend.maxWidth and legend.maxHeight are used to constrain the size of the Legend and force pagination.
import React, { useState, Fragment } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
AgChartLegendPosition,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";
ModuleRegistry.registerModules([
LegendModule,
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
title: {
text: `Renewable sources used to generate electricity for transport fuels`,
},
data: getData(),
series: [
{
type: "line",
xKey: "year",
yKey: "Onshore wind",
yName: "Onshore Wind",
},
{
type: "line",
xKey: "year",
yKey: "Offshore wind",
yName: "Offshore Wind",
},
{
type: "line",
xKey: "year",
yKey: "Marine energy",
yName: "Marine Energy",
},
{
type: "line",
xKey: "year",
yKey: "Solar photovoltaics",
yName: "Solar Photovoltaics",
},
{
type: "line",
xKey: "year",
yKey: "Small scale Hydro",
yName: "Small Scale Hydro",
},
{
type: "line",
xKey: "year",
yKey: "Large scale Hydro",
yName: "Large Scale Hydro",
},
{
type: "line",
xKey: "year",
yKey: "Plant biomass",
yName: "Plant Biomass",
},
{
type: "line",
xKey: "year",
yKey: "Animal biomass",
yName: "Animal Biomass",
},
{
type: "line",
xKey: "year",
yKey: "Landfill gas",
yName: "Landfill Gas",
},
{
type: "line",
xKey: "year",
yKey: "Sewage gas",
yName: "Sewage Gas",
},
],
axes: {
x: {
type: "unit-time",
},
y: {
type: "number",
title: {
text: `kilotonnes of oil equivalent (ktoe)`,
},
label: {
formatter: (params) => `${params.value / 1000}K`,
},
},
},
legend: {
maxHeight: 40,
maxWidth: 800,
},
});
const updateLegendPosition = (event: Event) => {
const nextOptions = clone(options);
const value = (event.target as HTMLInputElement)
.value as AgChartLegendPosition;
nextOptions.legend!.position = value;
switch (value) {
case "top":
case "bottom":
nextOptions.legend!.maxHeight = 40;
nextOptions.legend!.maxWidth = 800;
break;
case "right":
case "left":
nextOptions.legend!.maxHeight = 200;
nextOptions.legend!.maxWidth = 200;
break;
}
setOptions(nextOptions);
};
return (
<Fragment>
<div className="example-controls">
<div className="controls-row">
Legend Position:
<div
className="button-group"
role="group"
aria-label="Legend Position"
>
<input
type="radio"
id="legend-position-right"
name="legend-position"
defaultValue="right"
onChange={(event) => updateLegendPosition(event)}
/>
<label htmlFor="legend-position-right">
<code>'right'</code>
</label>
<input
type="radio"
id="legend-position-bottom"
name="legend-position"
defaultValue="bottom"
defaultChecked
onChange={(event) => updateLegendPosition(event)}
/>
<label htmlFor="legend-position-bottom">
<code>'bottom'</code>
</label>
<input
type="radio"
id="legend-position-left"
name="legend-position"
defaultValue="left"
onChange={(event) => updateLegendPosition(event)}
/>
<label htmlFor="legend-position-left">
<code>'left'</code>
</label>
<input
type="radio"
id="legend-position-top"
name="legend-position"
defaultValue="top"
onChange={(event) => updateLegendPosition(event)}
/>
<label htmlFor="legend-position-top">
<code>'top'</code>
</label>
</div>
</div>
</div>
<AgCharts options={options} />
</Fragment>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
return [
{
year: new Date(1990, 0, 1),
"Onshore wind": 1,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 11,
"Large scale Hydro": 437,
"Plant biomass": 0,
"Animal biomass": 0,
"Landfill gas": 46,
"Sewage gas": 104,
},
{
year: new Date(1991, 0, 1),
"Onshore wind": 1,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 12,
"Large scale Hydro": 385,
"Plant biomass": 0,
"Animal biomass": 0,
"Landfill gas": 68,
"Sewage gas": 108,
},
{
year: new Date(1992, 0, 1),
"Onshore wind": 3,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 13,
"Large scale Hydro": 454,
"Plant biomass": 0,
"Animal biomass": 17,
"Landfill gas": 124,
"Sewage gas": 108,
},
{
year: new Date(1993, 0, 1),
"Onshore wind": 19,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 356,
"Plant biomass": 0,
"Animal biomass": 52,
"Landfill gas": 147,
"Sewage gas": 124,
},
{
year: new Date(1994, 0, 1),
"Onshore wind": 30,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 424,
"Plant biomass": 0,
"Animal biomass": 71,
"Landfill gas": 170,
"Sewage gas": 118,
},
{
year: new Date(1995, 0, 1),
"Onshore wind": 34,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 402,
"Plant biomass": 0,
"Animal biomass": 71,
"Landfill gas": 184,
"Sewage gas": 135,
},
{
year: new Date(1996, 0, 1),
"Onshore wind": 42,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 10,
"Large scale Hydro": 282,
"Plant biomass": 0,
"Animal biomass": 67,
"Landfill gas": 232,
"Sewage gas": 135,
},
{
year: new Date(1997, 0, 1),
"Onshore wind": 57,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 344,
"Plant biomass": 0,
"Animal biomass": 68,
"Landfill gas": 301,
"Sewage gas": 134,
},
{
year: new Date(1998, 0, 1),
"Onshore wind": 75,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 422,
"Plant biomass": 0,
"Animal biomass": 76,
"Landfill gas": 389,
"Sewage gas": 126,
},
{
year: new Date(1999, 0, 1),
"Onshore wind": 73,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 441,
"Plant biomass": 0,
"Animal biomass": 157,
"Landfill gas": 558,
"Sewage gas": 135,
},
{
year: new Date(2000, 0, 1),
"Onshore wind": 81,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 419,
"Plant biomass": 11,
"Animal biomass": 183,
"Landfill gas": 718,
"Sewage gas": 120,
},
{
year: new Date(2001, 0, 1),
"Onshore wind": 83,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 331,
"Plant biomass": 81,
"Animal biomass": 205,
"Landfill gas": 822,
"Sewage gas": 119,
},
{
year: new Date(2002, 0, 1),
"Onshore wind": 108,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 394,
"Plant biomass": 92,
"Animal biomass": 184,
"Landfill gas": 879,
"Sewage gas": 121,
},
{
year: new Date(2003, 0, 1),
"Onshore wind": 110,
"Offshore wind": 1,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 13,
"Large scale Hydro": 257,
"Plant biomass": 137,
"Animal biomass": 169,
"Landfill gas": 1075,
"Sewage gas": 129,
},
{
year: new Date(2004, 0, 1),
"Onshore wind": 149,
"Offshore wind": 17,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 24,
"Large scale Hydro": 392,
"Plant biomass": 123,
"Animal biomass": 179,
"Landfill gas": 1313,
"Sewage gas": 144,
},
{
year: new Date(2005, 0, 1),
"Onshore wind": 215,
"Offshore wind": 35,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 38,
"Large scale Hydro": 385,
"Plant biomass": 129,
"Animal biomass": 159,
"Landfill gas": 1407,
"Sewage gas": 153,
},
{
year: new Date(2006, 0, 1),
"Onshore wind": 307,
"Offshore wind": 56,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 41,
"Large scale Hydro": 354,
"Plant biomass": 123,
"Animal biomass": 145,
"Landfill gas": 1451,
"Sewage gas": 146,
},
{
year: new Date(2007, 0, 1),
"Onshore wind": 386,
"Offshore wind": 67,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 45,
"Large scale Hydro": 392,
"Plant biomass": 138,
"Animal biomass": 218,
"Landfill gas": 1534,
"Sewage gas": 162,
},
{
year: new Date(2008, 0, 1),
"Onshore wind": 498,
"Offshore wind": 115,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 47,
"Large scale Hydro": 396,
"Plant biomass": 242,
"Animal biomass": 260,
"Landfill gas": 1540,
"Sewage gas": 180,
},
{
year: new Date(2009, 0, 1),
"Onshore wind": 647,
"Offshore wind": 151,
"Marine energy": 0,
"Solar photovoltaics": 2,
"Small scale Hydro": 49,
"Large scale Hydro": 401,
"Plant biomass": 387,
"Animal biomass": 232,
"Landfill gas": 1613,
"Sewage gas": 198,
},
{
year: new Date(2010, 0, 1),
"Onshore wind": 621,
"Offshore wind": 263,
"Marine energy": 0,
"Solar photovoltaics": 3,
"Small scale Hydro": 43,
"Large scale Hydro": 266,
"Plant biomass": 461,
"Animal biomass": 239,
"Landfill gas": 1711,
"Sewage gas": 237,
},
{
year: new Date(2011, 0, 1),
"Onshore wind": 930,
"Offshore wind": 443,
"Marine energy": 0,
"Solar photovoltaics": 21,
"Small scale Hydro": 61,
"Large scale Hydro": 429,
"Plant biomass": 554,
"Animal biomass": 224,
"Landfill gas": 1744,
"Sewage gas": 254,
},
{
year: new Date(2012, 0, 1),
"Onshore wind": 1053,
"Offshore wind": 654,
"Marine energy": 0,
"Solar photovoltaics": 116,
"Small scale Hydro": 58,
"Large scale Hydro": 398,
"Plant biomass": 1062,
"Animal biomass": 225,
"Landfill gas": 1708,
"Sewage gas": 242,
},
{
year: new Date(2013, 0, 1),
"Onshore wind": 1455,
"Offshore wind": 986,
"Marine energy": 0,
"Solar photovoltaics": 173,
"Small scale Hydro": 58,
"Large scale Hydro": 346,
"Plant biomass": 2008,
"Animal biomass": 226,
"Landfill gas": 1697,
"Sewage gas": 251,
},
{
year: new Date(2014, 0, 1),
"Onshore wind": 1595,
"Offshore wind": 1153,
"Marine energy": 0,
"Solar photovoltaics": 349,
"Small scale Hydro": 72,
"Large scale Hydro": 435,
"Plant biomass": 2913,
"Animal biomass": 225,
"Landfill gas": 1651,
"Sewage gas": 276,
},
{
year: new Date(2015, 0, 1),
"Onshore wind": 1965,
"Offshore wind": 1498,
"Marine energy": 0,
"Solar photovoltaics": 648,
"Small scale Hydro": 85,
"Large scale Hydro": 457,
"Plant biomass": 3850,
"Animal biomass": 235,
"Landfill gas": 1598,
"Sewage gas": 293,
},
{
year: new Date(2016, 0, 1),
"Onshore wind": 1785,
"Offshore wind": 1411,
"Marine energy": 0,
"Solar photovoltaics": 894,
"Small scale Hydro": 87,
"Large scale Hydro": 374,
"Plant biomass": 3855,
"Animal biomass": 230,
"Landfill gas": 1542,
"Sewage gas": 312,
},
{
year: new Date(2017, 0, 1),
"Onshore wind": 2470,
"Offshore wind": 1798,
"Marine energy": 0,
"Solar photovoltaics": 985,
"Small scale Hydro": 112,
"Large scale Hydro": 394,
"Plant biomass": 4206,
"Animal biomass": 226,
"Landfill gas": 1405,
"Sewage gas": 317,
},
{
year: new Date(2018, 0, 1),
"Onshore wind": 2612,
"Offshore wind": 2281,
"Marine energy": 1,
"Solar photovoltaics": 1089,
"Small scale Hydro": 111,
"Large scale Hydro": 357,
"Plant biomass": 4898,
"Animal biomass": 219,
"Landfill gas": 1284,
"Sewage gas": 325,
},
{
year: new Date(2019, 0, 1),
"Onshore wind": 2739,
"Offshore wind": 2749,
"Marine energy": 1,
"Solar photovoltaics": 1068,
"Small scale Hydro": 120,
"Large scale Hydro": 390,
"Plant biomass": 5400,
"Animal biomass": 243,
"Landfill gas": 866,
"Sewage gas": 233,
},
{
year: new Date(2020, 0, 1),
"Onshore wind": 3004,
"Offshore wind": 3498,
"Marine energy": 1,
"Solar photovoltaics": 1109,
"Small scale Hydro": 134,
"Large scale Hydro": 456,
"Plant biomass": 5637,
"Animal biomass": 241,
"Landfill gas": 835,
"Sewage gas": 237,
},
{
year: new Date(2021, 0, 1),
"Onshore wind": 2507,
"Offshore wind": 3053,
"Marine energy": 0,
"Solar photovoltaics": 1044,
"Small scale Hydro": 119,
"Large scale Hydro": 353,
"Plant biomass": 5990,
"Animal biomass": 240,
"Landfill gas": 791,
"Sewage gas": 233,
},
];
}
Use legend.pagination to customise the styling of the pagination label and buttons. See the API Reference for more details.
Customisation Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgCartesianChartOptions,
CategoryAxisModule,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([
CategoryAxisModule,
LegendModule,
LineSeriesModule,
NumberAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgCartesianChartOptions>({
data: getData(),
title: { text: "Change in Energy Sources" },
series: [
{
type: "line",
xKey: "quarter",
yKey: "naturalGas",
yName: "Natural gas",
},
{
type: "line",
xKey: "quarter",
yKey: "coal",
yName: "Coal",
},
{
type: "line",
xKey: "quarter",
yKey: "primaryOil",
yName: "Primary oil",
},
{
type: "line",
xKey: "quarter",
yKey: "petroleum",
yName: "Petroleum",
},
{
type: "line",
xKey: "quarter",
yKey: "manufacturedFuels",
yName: "Manufactured fuels",
},
],
legend: {
item: {
label: {
fontSize: 14,
fontStyle: "italic",
fontWeight: "bold",
fontFamily: "Papyrus",
color: "red",
maxLength: 12,
formatter: ({ value }) => (value == "Coal" ? value + " *" : value),
},
marker: {
size: 20,
strokeWidth: 3,
shape: "diamond", // 'circle', 'square', 'cross', 'plus', 'triangle'
},
line: {
strokeWidth: 4,
length: 40, //20 for the marker and 10 on each side
},
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
return [
{
quarter: "Q1",
coal: -666,
manufacturedFuels: -14,
primaryOil: -261,
petroleum: -124,
naturalGas: -1197,
},
{
quarter: "Q2",
coal: 208,
manufacturedFuels: 71,
primaryOil: 950,
petroleum: -318,
naturalGas: 906,
},
{
quarter: "Q3",
coal: 426,
manufacturedFuels: 19,
primaryOil: -845,
petroleum: 166,
naturalGas: 276,
},
{
quarter: "Q4",
coal: 158,
manufacturedFuels: -29,
primaryOil: -156,
petroleum: -19,
naturalGas: 672,
},
];
}
Labels Copy Link
It is possible to customise the label style using the legend.item.label options, and the displayed text by using legend.item.label.formatter function.
See the API Reference and Fills & Borders for more details.
Markers Copy Link
The look of the Legend markers is based on the styling of the series that they represent. It is possible to override this behaviour and set the size, stroke and shape of the legend.item.marker.
{
legend: {
item: {
marker: {
size: 20,
strokeWidth: 3,
shape: 'diamond', // 'circle', 'square', 'cross', 'plus', 'triangle'
},
},
},
} Line Copy Link
The look of the Legend item lines is based on the styling of the series that they represent. It is possible to override this behaviour and set the strokeWidth and length of the legend.item.line.
{
legend: {
item: {
line: {
strokeWidth: 4,
length: 40, //20 for the marker and 10 on each side
},
},
},
} Series Visibility Toggling Copy Link
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
AgChartLegendClickEvent,
AgChartOptions,
LegendModule,
LineSeriesModule,
ModuleRegistry,
NumberAxisModule,
UnitTimeAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([
LegendModule,
LineSeriesModule,
NumberAxisModule,
UnitTimeAxisModule,
]);
const ChartExample = () => {
const [options, setOptions] = useState<AgChartOptions>({
title: {
text: `Renewable sources used to generate electricity for transport fuels`,
},
data: getData(),
series: [
{
type: "line",
xKey: "year",
yKey: "Onshore wind",
yName: "Onshore Wind",
},
{
type: "line",
xKey: "year",
yKey: "Offshore wind",
yName: "Offshore Wind",
},
{
type: "line",
xKey: "year",
yKey: "Marine energy",
yName: "Marine Energy",
},
{
type: "line",
xKey: "year",
yKey: "Solar photovoltaics",
yName: "Solar Photovoltaics",
},
{
type: "line",
xKey: "year",
yKey: "Small scale Hydro",
yName: "Small Scale Hydro",
},
{
type: "line",
xKey: "year",
yKey: "Large scale Hydro",
yName: "Large Scale Hydro",
},
{
type: "line",
xKey: "year",
yKey: "Plant biomass",
yName: "Plant Biomass",
},
{
type: "line",
xKey: "year",
yKey: "Animal biomass",
yName: "Animal Biomass",
},
{
type: "line",
xKey: "year",
yKey: "Landfill gas",
yName: "Landfill Gas",
},
{
type: "line",
xKey: "year",
yKey: "Sewage gas",
yName: "Sewage Gas",
},
],
axes: {
x: {
type: "unit-time",
},
y: {
type: "number",
title: {
text: `kilotonnes of oil equivalent (ktoe)`,
},
label: {
formatter: (params) => `${params.value / 1000}K`,
},
},
},
legend: {
listeners: {
legendItemClick: ({ seriesId, itemId }: AgChartLegendClickEvent) => {
console.log(`seriesId: ${seriesId}, itemId: ${itemId}`);
},
},
},
});
return <AgCharts options={options} />;
};
const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
// Source: https://www.gov.uk/government/statistics/renewable-sources-of-energy-chapter-6-digest-of-united-kingdom-energy-statistics-dukes
export function getData() {
return [
{
year: new Date(1990, 0, 1),
"Onshore wind": 1,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 11,
"Large scale Hydro": 437,
"Plant biomass": 0,
"Animal biomass": 0,
"Landfill gas": 46,
"Sewage gas": 104,
"Onshore wind percent": 0,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 2,
"Large scale Hydro percent": 66,
"Plant biomass percent": 0,
"Animal biomass percent": 0,
"Landfill gas percent": 7,
"Sewage gas percent": 16,
},
{
year: new Date(1991, 0, 1),
"Onshore wind": 1,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 12,
"Large scale Hydro": 385,
"Plant biomass": 0,
"Animal biomass": 0,
"Landfill gas": 68,
"Sewage gas": 108,
"Onshore wind percent": 0,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 2,
"Large scale Hydro percent": 60,
"Plant biomass percent": 0,
"Animal biomass percent": 0,
"Landfill gas percent": 11,
"Sewage gas percent": 17,
},
{
year: new Date(1992, 0, 1),
"Onshore wind": 3,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 13,
"Large scale Hydro": 454,
"Plant biomass": 0,
"Animal biomass": 17,
"Landfill gas": 124,
"Sewage gas": 108,
"Onshore wind percent": 0,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 2,
"Large scale Hydro percent": 56,
"Plant biomass percent": 0,
"Animal biomass percent": 2,
"Landfill gas percent": 15,
"Sewage gas percent": 13,
},
{
year: new Date(1993, 0, 1),
"Onshore wind": 19,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 356,
"Plant biomass": 0,
"Animal biomass": 52,
"Landfill gas": 147,
"Sewage gas": 124,
"Onshore wind percent": 2,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 2,
"Large scale Hydro percent": 43,
"Plant biomass percent": 0,
"Animal biomass percent": 6,
"Landfill gas percent": 18,
"Sewage gas percent": 15,
},
{
year: new Date(1994, 0, 1),
"Onshore wind": 30,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 424,
"Plant biomass": 0,
"Animal biomass": 71,
"Landfill gas": 170,
"Sewage gas": 118,
"Onshore wind percent": 3,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 42,
"Plant biomass percent": 0,
"Animal biomass percent": 7,
"Landfill gas percent": 17,
"Sewage gas percent": 12,
},
{
year: new Date(1995, 0, 1),
"Onshore wind": 34,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 402,
"Plant biomass": 0,
"Animal biomass": 71,
"Landfill gas": 184,
"Sewage gas": 135,
"Onshore wind percent": 3,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 39,
"Plant biomass percent": 0,
"Animal biomass percent": 7,
"Landfill gas percent": 18,
"Sewage gas percent": 13,
},
{
year: new Date(1996, 0, 1),
"Onshore wind": 42,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 10,
"Large scale Hydro": 282,
"Plant biomass": 0,
"Animal biomass": 67,
"Landfill gas": 232,
"Sewage gas": 135,
"Onshore wind percent": 4,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 29,
"Plant biomass percent": 0,
"Animal biomass percent": 7,
"Landfill gas percent": 24,
"Sewage gas percent": 14,
},
{
year: new Date(1997, 0, 1),
"Onshore wind": 57,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 14,
"Large scale Hydro": 344,
"Plant biomass": 0,
"Animal biomass": 68,
"Landfill gas": 301,
"Sewage gas": 134,
"Onshore wind percent": 5,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 29,
"Plant biomass percent": 0,
"Animal biomass percent": 6,
"Landfill gas percent": 26,
"Sewage gas percent": 11,
},
{
year: new Date(1998, 0, 1),
"Onshore wind": 75,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 422,
"Plant biomass": 0,
"Animal biomass": 76,
"Landfill gas": 389,
"Sewage gas": 126,
"Onshore wind percent": 5,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 29,
"Plant biomass percent": 0,
"Animal biomass percent": 5,
"Landfill gas percent": 27,
"Sewage gas percent": 9,
},
{
year: new Date(1999, 0, 1),
"Onshore wind": 73,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 441,
"Plant biomass": 0,
"Animal biomass": 157,
"Landfill gas": 558,
"Sewage gas": 135,
"Onshore wind percent": 4,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 26,
"Plant biomass percent": 0,
"Animal biomass percent": 9,
"Landfill gas percent": 32,
"Sewage gas percent": 8,
},
{
year: new Date(2000, 0, 1),
"Onshore wind": 81,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 419,
"Plant biomass": 11,
"Animal biomass": 183,
"Landfill gas": 718,
"Sewage gas": 120,
"Onshore wind percent": 4,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 22,
"Plant biomass percent": 1,
"Animal biomass percent": 10,
"Landfill gas percent": 38,
"Sewage gas percent": 6,
},
{
year: new Date(2001, 0, 1),
"Onshore wind": 83,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 331,
"Plant biomass": 81,
"Animal biomass": 205,
"Landfill gas": 822,
"Sewage gas": 119,
"Onshore wind percent": 4,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 16,
"Plant biomass percent": 4,
"Animal biomass percent": 10,
"Landfill gas percent": 40,
"Sewage gas percent": 6,
},
{
year: new Date(2002, 0, 1),
"Onshore wind": 108,
"Offshore wind": 0,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 18,
"Large scale Hydro": 394,
"Plant biomass": 92,
"Animal biomass": 184,
"Landfill gas": 879,
"Sewage gas": 121,
"Onshore wind percent": 5,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 17,
"Plant biomass percent": 4,
"Animal biomass percent": 8,
"Landfill gas percent": 38,
"Sewage gas percent": 5,
},
{
year: new Date(2003, 0, 1),
"Onshore wind": 110,
"Offshore wind": 1,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 13,
"Large scale Hydro": 257,
"Plant biomass": 137,
"Animal biomass": 169,
"Landfill gas": 1075,
"Sewage gas": 129,
"Onshore wind percent": 4,
"Offshore wind percent": 0,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 10,
"Plant biomass percent": 5,
"Animal biomass percent": 7,
"Landfill gas percent": 42,
"Sewage gas percent": 5,
},
{
year: new Date(2004, 0, 1),
"Onshore wind": 149,
"Offshore wind": 17,
"Marine energy": 0,
"Solar photovoltaics": 0,
"Small scale Hydro": 24,
"Large scale Hydro": 392,
"Plant biomass": 123,
"Animal biomass": 179,
"Landfill gas": 1313,
"Sewage gas": 144,
"Onshore wind percent": 5,
"Offshore wind percent": 1,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 13,
"Plant biomass percent": 4,
"Animal biomass percent": 6,
"Landfill gas percent": 42,
"Sewage gas percent": 5,
},
{
year: new Date(2005, 0, 1),
"Onshore wind": 215,
"Offshore wind": 35,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 38,
"Large scale Hydro": 385,
"Plant biomass": 129,
"Animal biomass": 159,
"Landfill gas": 1407,
"Sewage gas": 153,
"Onshore wind percent": 6,
"Offshore wind percent": 1,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 10,
"Plant biomass percent": 3,
"Animal biomass percent": 4,
"Landfill gas percent": 37,
"Sewage gas percent": 4,
},
{
year: new Date(2006, 0, 1),
"Onshore wind": 307,
"Offshore wind": 56,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 41,
"Large scale Hydro": 354,
"Plant biomass": 123,
"Animal biomass": 145,
"Landfill gas": 1451,
"Sewage gas": 146,
"Onshore wind percent": 8,
"Offshore wind percent": 1,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 9,
"Plant biomass percent": 3,
"Animal biomass percent": 4,
"Landfill gas percent": 37,
"Sewage gas percent": 4,
},
{
year: new Date(2007, 0, 1),
"Onshore wind": 386,
"Offshore wind": 67,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 45,
"Large scale Hydro": 392,
"Plant biomass": 138,
"Animal biomass": 218,
"Landfill gas": 1534,
"Sewage gas": 162,
"Onshore wind percent": 10,
"Offshore wind percent": 2,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 10,
"Plant biomass percent": 3,
"Animal biomass percent": 5,
"Landfill gas percent": 38,
"Sewage gas percent": 4,
},
{
year: new Date(2008, 0, 1),
"Onshore wind": 498,
"Offshore wind": 115,
"Marine energy": 0,
"Solar photovoltaics": 1,
"Small scale Hydro": 47,
"Large scale Hydro": 396,
"Plant biomass": 242,
"Animal biomass": 260,
"Landfill gas": 1540,
"Sewage gas": 180,
"Onshore wind percent": 12,
"Offshore wind percent": 3,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 9,
"Plant biomass percent": 6,
"Animal biomass percent": 6,
"Landfill gas percent": 36,
"Sewage gas percent": 4,
},
{
year: new Date(2009, 0, 1),
"Onshore wind": 647,
"Offshore wind": 151,
"Marine energy": 0,
"Solar photovoltaics": 2,
"Small scale Hydro": 49,
"Large scale Hydro": 401,
"Plant biomass": 387,
"Animal biomass": 232,
"Landfill gas": 1613,
"Sewage gas": 198,
"Onshore wind percent": 14,
"Offshore wind percent": 3,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 8,
"Plant biomass percent": 8,
"Animal biomass percent": 5,
"Landfill gas percent": 34,
"Sewage gas percent": 4,
},
{
year: new Date(2010, 0, 1),
"Onshore wind": 621,
"Offshore wind": 263,
"Marine energy": 0,
"Solar photovoltaics": 3,
"Small scale Hydro": 43,
"Large scale Hydro": 266,
"Plant biomass": 461,
"Animal biomass": 239,
"Landfill gas": 1711,
"Sewage gas": 237,
"Onshore wind percent": 12,
"Offshore wind percent": 5,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 5,
"Plant biomass percent": 9,
"Animal biomass percent": 5,
"Landfill gas percent": 33,
"Sewage gas percent": 5,
},
{
year: new Date(2011, 0, 1),
"Onshore wind": 930,
"Offshore wind": 443,
"Marine energy": 0,
"Solar photovoltaics": 21,
"Small scale Hydro": 61,
"Large scale Hydro": 429,
"Plant biomass": 554,
"Animal biomass": 224,
"Landfill gas": 1744,
"Sewage gas": 254,
"Onshore wind percent": 15,
"Offshore wind percent": 7,
"Marine energy percent": 0,
"Solar photovoltaics percent": 0,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 7,
"Plant biomass percent": 9,
"Animal biomass percent": 4,
"Landfill gas percent": 29,
"Sewage gas percent": 4,
},
{
year: new Date(2012, 0, 1),
"Onshore wind": 1053,
"Offshore wind": 654,
"Marine energy": 0,
"Solar photovoltaics": 116,
"Small scale Hydro": 58,
"Large scale Hydro": 398,
"Plant biomass": 1062,
"Animal biomass": 225,
"Landfill gas": 1708,
"Sewage gas": 242,
"Onshore wind percent": 16,
"Offshore wind percent": 10,
"Marine energy percent": 0,
"Solar photovoltaics percent": 2,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 6,
"Plant biomass percent": 16,
"Animal biomass percent": 3,
"Landfill gas percent": 25,
"Sewage gas percent": 4,
},
{
year: new Date(2013, 0, 1),
"Onshore wind": 1455,
"Offshore wind": 986,
"Marine energy": 0,
"Solar photovoltaics": 173,
"Small scale Hydro": 58,
"Large scale Hydro": 346,
"Plant biomass": 2008,
"Animal biomass": 226,
"Landfill gas": 1697,
"Sewage gas": 251,
"Onshore wind percent": 18,
"Offshore wind percent": 12,
"Marine energy percent": 0,
"Solar photovoltaics percent": 2,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 4,
"Plant biomass percent": 25,
"Animal biomass percent": 3,
"Landfill gas percent": 21,
"Sewage gas percent": 3,
},
{
year: new Date(2014, 0, 1),
"Onshore wind": 1595,
"Offshore wind": 1153,
"Marine energy": 0,
"Solar photovoltaics": 349,
"Small scale Hydro": 72,
"Large scale Hydro": 435,
"Plant biomass": 2913,
"Animal biomass": 225,
"Landfill gas": 1651,
"Sewage gas": 276,
"Onshore wind percent": 16,
"Offshore wind percent": 12,
"Marine energy percent": 0,
"Solar photovoltaics percent": 4,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 4,
"Plant biomass percent": 30,
"Animal biomass percent": 2,
"Landfill gas percent": 17,
"Sewage gas percent": 3,
},
{
year: new Date(2015, 0, 1),
"Onshore wind": 1965,
"Offshore wind": 1498,
"Marine energy": 0,
"Solar photovoltaics": 648,
"Small scale Hydro": 85,
"Large scale Hydro": 457,
"Plant biomass": 3850,
"Animal biomass": 235,
"Landfill gas": 1598,
"Sewage gas": 293,
"Onshore wind percent": 16,
"Offshore wind percent": 12,
"Marine energy percent": 0,
"Solar photovoltaics percent": 5,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 4,
"Plant biomass percent": 32,
"Animal biomass percent": 2,
"Landfill gas percent": 13,
"Sewage gas percent": 2,
},
{
year: new Date(2016, 0, 1),
"Onshore wind": 1785,
"Offshore wind": 1411,
"Marine energy": 0,
"Solar photovoltaics": 894,
"Small scale Hydro": 87,
"Large scale Hydro": 374,
"Plant biomass": 3855,
"Animal biomass": 230,
"Landfill gas": 1542,
"Sewage gas": 312,
"Onshore wind percent": 14,
"Offshore wind percent": 11,
"Marine energy percent": 0,
"Solar photovoltaics percent": 7,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 3,
"Plant biomass percent": 31,
"Animal biomass percent": 2,
"Landfill gas percent": 12,
"Sewage gas percent": 3,
},
{
year: new Date(2017, 0, 1),
"Onshore wind": 2470,
"Offshore wind": 1798,
"Marine energy": 0,
"Solar photovoltaics": 985,
"Small scale Hydro": 112,
"Large scale Hydro": 394,
"Plant biomass": 4206,
"Animal biomass": 226,
"Landfill gas": 1405,
"Sewage gas": 317,
"Onshore wind percent": 18,
"Offshore wind percent": 13,
"Marine energy percent": 0,
"Solar photovoltaics percent": 7,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 3,
"Plant biomass percent": 30,
"Animal biomass percent": 2,
"Landfill gas percent": 10,
"Sewage gas percent": 2,
},
{
year: new Date(2018, 0, 1),
"Onshore wind": 2612,
"Offshore wind": 2281,
"Marine energy": 1,
"Solar photovoltaics": 1089,
"Small scale Hydro": 111,
"Large scale Hydro": 357,
"Plant biomass": 4898,
"Animal biomass": 219,
"Landfill gas": 1284,
"Sewage gas": 325,
"Onshore wind percent": 17,
"Offshore wind percent": 15,
"Marine energy percent": 0,
"Solar photovoltaics percent": 7,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 2,
"Plant biomass percent": 32,
"Animal biomass percent": 1,
"Landfill gas percent": 8,
"Sewage gas percent": 2,
},
{
year: new Date(2019, 0, 1),
"Onshore wind": 2739,
"Offshore wind": 2749,
"Marine energy": 1,
"Solar photovoltaics": 1068,
"Small scale Hydro": 120,
"Large scale Hydro": 390,
"Plant biomass": 5400,
"Animal biomass": 243,
"Landfill gas": 866,
"Sewage gas": 233,
"Onshore wind percent": 17,
"Offshore wind percent": 17,
"Marine energy percent": 0,
"Solar photovoltaics percent": 7,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 2,
"Plant biomass percent": 34,
"Animal biomass percent": 2,
"Landfill gas percent": 5,
"Sewage gas percent": 1,
},
{
year: new Date(2020, 0, 1),
"Onshore wind": 3004,
"Offshore wind": 3498,
"Marine energy": 1,
"Solar photovoltaics": 1109,
"Small scale Hydro": 134,
"Large scale Hydro": 456,
"Plant biomass": 5637,
"Animal biomass": 241,
"Landfill gas": 835,
"Sewage gas": 237,
"Onshore wind percent": 17,
"Offshore wind percent": 20,
"Marine energy percent": 0,
"Solar photovoltaics percent": 6,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 3,
"Plant biomass percent": 32,
"Animal biomass percent": 1,
"Landfill gas percent": 5,
"Sewage gas percent": 1,
},
{
year: new Date(2021, 0, 1),
"Onshore wind": 2507,
"Offshore wind": 3053,
"Marine energy": 0,
"Solar photovoltaics": 1044,
"Small scale Hydro": 119,
"Large scale Hydro": 353,
"Plant biomass": 5990,
"Animal biomass": 240,
"Landfill gas": 791,
"Sewage gas": 233,
"Onshore wind percent": 15,
"Offshore wind percent": 18,
"Marine energy percent": 0,
"Solar photovoltaics percent": 6,
"Small scale Hydro percent": 1,
"Large scale Hydro percent": 2,
"Plant biomass percent": 36,
"Animal biomass percent": 1,
"Landfill gas percent": 5,
"Sewage gas percent": 1,
},
];
}
By default, when a Legend item is clicked, the visibility of the series associated with that item will be toggled. This allows the users to control which series are displayed in the chart by clicking on Legend items.
Additionally, when a Legend item is double clicked, the chart will show that series only. Double clicking again will show all of the series.
In the above example:
- Clicking or double clicking a Legend item will toggle the series visibility.
- It will also log a message to the console via a
legendItemClickevent.
Pie series sectors do not toggle when a Legend item is double clicked.
To disable series toggling on Legend item click or double click, set the legend.toggleSeries property to false.
{
legend: {
toggleSeries: false,
},
}To prevent the last visible series from being hidden, use the preventHidingAll option.
{
legend: {
preventHidingAll: true,
},
} Legend Events Copy Link
The legendItemClick and legendItemDoubleClick events can be used to listen to Legend item clicks and double clicks, respectively. They can also be used to call a preventDefault function for complete control of when to stop the series toggling. For more information see Legend Events.
The seriesVisibilityChange events can be used to listen for Series Visibility toggling. For more information see Series Visibility Change Event.
API Reference Copy Link
Properties available on the AgChartLegendOptions interface.
- enabled
boolean - Whether to show the legend. By default, the chart displays a legend when there is more than one series present.
- position
AgChartLegendPositiondefault: 'bottom' - Where the legend should be positioned in relation to the chart. A placement keyword, or an object for fine-grained positioning.
- orientation
AgChartLegendOrientation - How the legend items should be arranged.
- maxWidth
PixelSize - Used to constrain the width of the legend.
- maxHeight
PixelSize - Used to constrain the height of the legend.
- border
BorderOptions - The border around the legend.
- cornerRadius
PixelSize - The corner radius of the legend.
- padding
Padding - The padding between the border and legend items. A number applies uniform padding; an object sets each side.
- spacing
PixelSizedefault: 30 - The spacing in pixels to use outside the legend. __Note:__ This only applies when `floating: false`.
- item
AgChartLegendItemOptions - Configuration for the legend items that consist of a marker and a label.
- reverseOrder
boolean - Reverse the display order of legend items if `true`.
- listeners
AgChartLegendListeners - Optional callbacks for specific legend-related events.
- pagination
AgChartLegendPaginationOptions - Configuration for the pagination controls.
- preventHidingAll
boolean - Set to `true` to prevent the last visible series from being toggled hidden.
- toggleSeries
boolean - Set to `false` to turn off toggling of the series visibility in the chart when a legend item is clicked.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.
Properties available on the AgChartLegendOptions interface.
- enabled
boolean - Whether to show the legend. By default, the chart displays a legend when there is more than one series present.
- position
AgChartLegendPositiondefault: 'bottom' - Where the legend should be positioned in relation to the chart. A placement keyword, or an object for fine-grained positioning.
- orientation
AgChartLegendOrientation - How the legend items should be arranged.
- maxWidth
PixelSize - Used to constrain the width of the legend.
- maxHeight
PixelSize - Used to constrain the height of the legend.
- border
BorderOptions - The border around the legend.
- cornerRadius
PixelSize - The corner radius of the legend.
- padding
Padding - The padding between the border and legend items. A number applies uniform padding; an object sets each side.
- spacing
PixelSizedefault: 30 - The spacing in pixels to use outside the legend. __Note:__ This only applies when `floating: false`.
- item
AgChartLegendItemOptions - Configuration for the legend items that consist of a marker and a label.
- reverseOrder
boolean - Reverse the display order of legend items if `true`.
- listeners
AgChartLegendListeners - Optional callbacks for specific legend-related events.
- pagination
AgChartLegendPaginationOptions - Configuration for the pagination controls.
- preventHidingAll
boolean - Set to `true` to prevent the last visible series from being toggled hidden.
- toggleSeries
boolean - Set to `false` to turn off toggling of the series visibility in the chart when a legend item is clicked.
- fill
AgColorType - The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
- fillOpacity
Opacity - The opacity of the fill colour.