A Pie Series displays categorical data as proportional slices within a circle.
Simple Pie
To create a Pie Series, use the pie series type.
series: [{ type: 'pie', angleKey: 'amount', legendItemKey: 'amount' }],
In this configuration:
angleKeydetermines the angle of each pie sector. The total of all values will correspond to the full pie.legendItemKeyconfigures the names to be used in the legend for each sector.
Labels
The Pie Series supports two types of label related to individual sectors.
- Callout labels are displayed adjacent to each sector, connected with callout line.
- Sector labels are displayed inside each sector.
series: [
{
type: 'pie',
angleKey: 'amount',
calloutLabelKey: 'asset',
sectorLabelKey: 'amount',
sectorLabel: {
color: 'white',
fontWeight: 'bold',
},
},
],
In this configuration:
calloutLabelKeydefines the variable used for the callout labels. This is also used in the Legend if nolegendItemKeyis provided, and in the Tooltips.sectorLabelKeydefines the variable used for the sector labels.
Both sector and callout labels implement collision avoidance by default. This means that sector labels are not displayed where the sector is too small to fit the label text. Similarly, callout labels are positioned to fit if possible, otherwise they too are hidden.
It is possible to customise the text displayed in these labels by using the calloutLabel.formatter and sectorLabel.formatter. These functions receive a single object as a parameter containing the options and datum associated with a pie sector, and should return a string.
Please see the API reference for options to customise calloutLabel, calloutLine and sectorLabel, as well as other series customisations.
Variable Sector Radius
It is possible to visualise a second variable in the Pie Series by using the radiusKey to vary the radius of a sector based on the values. This is also known as a Rose Chart.
series: [
{
type: 'pie',
radiusKey: 'yield',
angleKey: 'amount',
calloutLabelKey: 'asset',
},
],
API Reference
Properties available on the AgPieSeriesOptions interface.
The ratio of the outer radius of the series. Used to adjust the outer radius proportionally to the automatically calculated value.
The spacing between pie sectors.
Important: When this property is used, strokes are rendered on the inside of the pie 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 pie 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.