Doughnut and Pie Charts

Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.

They are excellent at showing the relational proportions between data.

Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutout. This equates to what portion of the inner should be cut out. This defaults to 0 for pie charts, and '50%' for doughnuts.

They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

Doughnut and Pie Charts - 图1

config setup

  1. const config = {
  2. type: 'doughnut',
  3. data: data,
  4. };
  1. const data = {
  2. labels: [
  3. 'Red',
  4. 'Blue',
  5. 'Yellow'
  6. ],
  7. datasets: [{
  8. label: 'My First Dataset',
  9. data: [300, 50, 100],
  10. backgroundColor: [
  11. 'rgb(255, 99, 132)',
  12. 'rgb(54, 162, 235)',
  13. 'rgb(255, 205, 86)'
  14. ],
  15. hoverOffset: 4
  16. }]
  17. };

Doughnut and Pie Charts - 图2

config setup

  1. const config = {
  2. type: 'pie',
  3. data: data,
  4. };
  1. const data = {
  2. labels: [
  3. 'Red',
  4. 'Blue',
  5. 'Yellow'
  6. ],
  7. datasets: [{
  8. label: 'My First Dataset',
  9. data: [300, 50, 100],
  10. backgroundColor: [
  11. 'rgb(255, 99, 132)',
  12. 'rgb(54, 162, 235)',
  13. 'rgb(255, 205, 86)'
  14. ],
  15. hoverOffset: 4
  16. }]
  17. };

Dataset Properties

Namespaces:

  • data.datasets[index] - options for this dataset only
  • options.datasets.doughnut - options for all doughnut datasets
  • options.datasets.pie - options for all pie datasets
  • options.elements.arc - options for all arc elements
  • options - options for the whole chart

The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colours of the dataset’s arcs are generally set this way.

NameTypeScriptableIndexableDefault
backgroundColorColorYesYes‘rgba(0, 0, 0, 0.1)’
borderAlign‘center’|‘inner’YesYes‘center’
borderColorColorYesYes‘#fff’
borderDashnumber[]Yes-[]
borderDashOffsetnumberYes-0.0
borderJoinStyle‘round’|‘bevel’|‘miter’YesYesundefined
borderRadiusnumber|objectYesYes0
borderWidthnumberYesYes2
circumferencenumber--undefined
clipnumber|object|false--undefined
datanumber[]--required
hoverBackgroundColorColorYesYesundefined
hoverBorderColorColorYesYesundefined
hoverBorderDashnumber[]Yes-undefined
hoverBorderDashOffsetnumberYes-undefined
hoverBorderJoinStyle‘round’|‘bevel’|‘miter’YesYesundefined
hoverBorderWidthnumberYesYesundefined
hoverOffsetnumberYesYes0
offsetnumber|number[]YesYes0
rotationnumber--undefined
spacingnumber--0
weightnumber--1

All these values, if undefined, fallback to the scopes described in option resolution

General

NameDescription
circumferencePer-dataset override for the sweep that the arcs cover
clipHow to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}
rotationPer-dataset override for the starting angle to draw arcs from

Styling

The style of each arc can be controlled with the following properties:

NameDescription
backgroundColorarc background color.
borderColorarc border color.
borderDasharc border length and spacing of dashes. See MDNDoughnut and Pie Charts - 图3 (opens new window).
borderDashOffsetarc border offset for line dashes. See MDNDoughnut and Pie Charts - 图4 (opens new window).
borderJoinStylearc border join style. See MDNDoughnut and Pie Charts - 图5 (opens new window).
borderWidtharc border width (in pixels).
offsetarc offset (in pixels).
spacingFixed arc offset (in pixels). Similar to offset but applies to all arcs.
weightThe relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.

All these values, if undefined, fallback to the associated elements.arc.* options.

Border Alignment

The following values are supported for borderAlign.

  • 'center' (default)
  • 'inner'

When 'center' is set, the borders of arcs next to each other will overlap. When 'inner' is set, it is guaranteed that all borders will not overlap.

Border Radius

If this value is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). If this value is an object, the outerStart property defines the outer-start corner’s border radius. Similarly, the outerEnd, innerStart, and innerEnd properties can also be specified.

Interactions

The interaction with each arc can be controlled with the following properties:

NameDescription
hoverBackgroundColorarc background color when hovered.
hoverBorderColorarc border color when hovered.
hoverBorderDasharc border length and spacing of dashes when hovered. See MDNDoughnut and Pie Charts - 图6 (opens new window).
hoverBorderDashOffsetarc border offset for line dashes when hovered. See MDNDoughnut and Pie Charts - 图7 (opens new window).
hoverBorderJoinStylearc border join style when hovered. See MDNDoughnut and Pie Charts - 图8 (opens new window).
hoverBorderWidtharc border width when hovered (in pixels).
hoverOffsetarc offset when hovered (in pixels).

All these values, if undefined, fallback to the associated elements.arc.* options.

Config Options

These are the customisation options specific to Pie & Doughnut charts. These options are looked up on access, and form together with the global chart configuration the options of the chart.

NameTypeDefaultDescription
cutoutnumber|string50% - for doughnut, 0 - for pieThe portion of the chart that is cut out of the middle. If string and ending with ‘%’, percentage of the chart radius. number is considered to be pixels.
radiusnumber|string100%The outer radius of the chart. If string and ending with ‘%’, percentage of the maximum radius. number is considered to be pixels.
rotationnumber0Starting angle to draw arcs from.
circumferencenumber360Sweep to allow arcs to cover.
animation.animateRotatebooleantrueIf true, the chart will animate in with a rotation animation. This property is in the options.animation object.
animation.animateScalebooleanfalseIf true, will animate scaling the chart from the center outwards.

Default Options

We can also change these default values for each Doughnut type that is created, this object is available at Chart.overrides.doughnut. Pie charts also have a clone of these defaults available to change at Chart.overrides.pie, with the only difference being cutout being set to 0.

Data Structure

For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.

You also need to specify an array of labels so that tooltips appear correctly.

  1. data = {
  2. datasets: [{
  3. data: [10, 20, 30]
  4. }],
  5. // These labels appear in the legend and in the tooltips when hovering different arcs
  6. labels: [
  7. 'Red',
  8. 'Yellow',
  9. 'Blue'
  10. ]
  11. };