A Donut Series has all the benefits of a Pie Series and allows displaying multiple datasets in a single chart.
Simple Donut
To create a Donut Series, use the donut series type and specify an innerRadiusRatio.
series: [
{
type: 'donut',
calloutLabelKey: 'asset',
angleKey: 'amount',
innerRadiusRatio: 0.7,
},
],
The innerRadiusRatio 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
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',
margin: 4,
fontSize: 48,
color: 'green',
},
],
innerCircle: {
fill: '#c9fdc9',
},
},
],
Multiple Donuts
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
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.
API Reference
Properties available on the AgDonutSeriesOptions interface.
The ratio of the outer radius of the series. Used to adjust the outer radius proportionally to the automatically calculated value.
The offset in pixels of the inner radius of the series.
Note: An innerRadiusRatio or an innerRadiusOffset must be provided in order to render a Donut series.
The ratio of the inner radius of the series.
Note: An innerRadiusRatio or an innerRadiusOffset must be provided in order to render a Donut series.
The spacing between Donut sectors.
Important: When this property is used, strokes are rendered on the inside of the Donut sectors, and no longer have a default colour.
Configuration for marker and series highlighting when a series or legend item is hovered over.
The key to use to retrieve legend item labels from the data. If multiple series share this key they will be merged in the legend.
A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
A human-readable description of the label values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
A human-readable description of the sector label values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.