A Donut Series has all the benefits of a Pie Series and allows displaying multiple datasets in a single chart.
Simple Donut Copy Link
import {
AgChartOptions,
AgCharts,
DonutSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Portfolio Composition",
},
series: [
{
type: "donut",
calloutLabelKey: "asset",
angleKey: "amount",
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ asset: "Stocks", amount: 60000 },
{ asset: "Bonds", amount: 40000 },
{ asset: "Cash", amount: 7000 },
{ asset: "Real Estate", amount: 5000 },
{ asset: "Commodities", amount: 3000 },
];
}
To create a Donut Series, use the donut series type.
{
series: [
{
type: 'donut',
calloutLabelKey: 'asset',
angleKey: 'amount',
},
],
}An optional innerRadiusRatio can be provided which should be a value between 0 and 1 and defines the radius of the inner circle as a ratio of the outer radius of the chart.
Inner Labels Copy Link
import {
AgChartOptions,
AgCharts,
DonutSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Portfolio Composition",
},
series: [
{
type: "donut",
calloutLabelKey: "asset",
angleKey: "amount",
innerRadiusRatio: 0.9,
innerLabels: [
{
text: "Total Investment",
fontWeight: "bold",
},
{
text: "$100,000",
spacing: 4,
fontSize: 40,
color: "green",
},
],
innerCircle: {
fill: "#c9fdc9",
},
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ asset: "Stocks", amount: 60000 },
{ asset: "Bonds", amount: 40000 },
{ asset: "Cash", amount: 7000 },
{ asset: "Real Estate", amount: 5000 },
{ asset: "Commodities", amount: 3000 },
];
}
The innerLabels property can be used to put several lines of text in the space inside a Donut Series.
The colour of the centre area can be changed by using innerCircle.
{
series: [
{
// ...
innerLabels: [
{
text: 'Total Investment',
fontWeight: 'bold',
},
{
text: '$100,000',
spacing: 4,
fontSize: 44,
color: 'green',
},
],
innerCircle: {
fill: '#c9fdc9',
},
},
],
} Multiple Donuts Copy Link
import {
AgChartOptions,
AgCharts,
DonutSeriesModule,
LegendModule,
ModuleRegistry,
} from "ag-charts-community";
import { getData } from "./data";
ModuleRegistry.registerModules([DonutSeriesModule, LegendModule]);
const options: AgChartOptions = {
data: getData(),
title: {
text: "Portfolio Composition",
},
subtitle: {
text: "Versus Previous Year",
},
series: [
{
type: "donut",
title: {
text: "Previous Year",
showInLegend: true,
},
calloutLabelKey: "asset",
angleKey: "previousYear",
outerRadiusRatio: 1,
innerRadiusRatio: 0.9,
},
{
type: "donut",
title: {
text: "Current Year",
showInLegend: true,
},
calloutLabelKey: "asset",
angleKey: "currentYear",
outerRadiusRatio: 0.6,
innerRadiusRatio: 0.2,
},
],
};
options.container = document.getElementById("myChart");
const chart = AgCharts.create(options);
export function getData() {
return [
{ asset: "Stocks", previousYear: 70000, currentYear: 40000 },
{ asset: "Bonds", previousYear: 30000, currentYear: 60000 },
{ asset: "Cash", previousYear: 5000, currentYear: 7000 },
{ asset: "Real Estate", previousYear: 8000, currentYear: 5000 },
{ asset: "Commodities", previousYear: 4500, currentYear: 3000 },
];
}
To render multiple Donut Series in a single chart without overlapping, set an outerRadiusRatio in conjunction with an innerRadiusRatio.
{
series: [
{
// outer series
// ...
outerRadiusRatio: 1, // the default
innerRadiusRatio: 0.9,
title: { text: 'Previous Year', showInLegend: true },
},
{
// inner series
// ...
outerRadiusRatio: 0.6,
innerRadiusRatio: 0.2,
title: { text: 'Current Year', showInLegend: true },
},
],
}In the above configuration:
- The difference of
0.3between theinnerRadiusRatioof the outer series and theouterRadiusRatioof the inner series determines the size of the gap between the outer and inner series. - The difference between
outerRadiusRatioandinnerRadiusRatiofor each series determines the thickness of the ring for that series. - The
titleprovided for each series is displayed above the Donut Series if there is space. - Using
showInLegenddisplays the title within the legend item, allowing differentiation between the two series within the legend.
Shared Legend Copy Link
Providing a matching legendItemKey allows synchronising of legend items across multiple Donut Series. When a legend item is clicked, all items with a matching legendItemKey are toggled.
{
series: [
{
// ...
calloutLabelKey: 'asset',
legendItemKey: 'asset',
},
{
// ...
legendItemKey: 'asset',
showInLegend: false,
},
],
}Using showInLegend: false for the second series, ensures that there are no duplicate legend items.