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.3
between theinnerRadiusRatio
of the outer series and theouterRadiusRatio
of the inner series determines the size of the gap between the outer and inner series. - The difference between
outerRadiusRatio
andinnerRadiusRatio
for each series determines the thickness of the ring for that series. - The
title
provided for each series is displayed above the Donut Series if there is space. - Using
showInLegend
displays 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.