JavaScript ChartsPie Series

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:

• angleKey determines the angle of each pie sector. The total of all values will correspond to the full pie.
• legendItemKey configures 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:

• calloutLabelKey defines the variable used for the callout labels. This is also used in the Legend if no legendItemKey is provided, and in the Tooltips.
• sectorLabelKey defines the variable used for the sector labels.

By default, callout labels won't be displayed for sectors with a value of 0. Set calloutLabel.minAngle = 0 to show these.

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