Setting width, rotation, and circumference of doughnut chart (Chart.js)

Custom size and rotation

To customize the size of a doughnut chart, set options.cutoutPercentage. To customize the rotation of the segments, set options.rotation (in radians).

Here’s an example with custom settings:

{
type: 'doughnut',
data: {
datasets: [
{
data: [94, 25, 72, 70, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
label: 'Dataset 1',
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
cutoutPercentage: 80,
rotation: -Math.PI / 2,
circumference: Math.PI,
legend: {
display: false,
},
},
}

It results in the following:

Custom circumference

options.circumference controls how much of the circle the chart should follow.

Recall the formula to convert degrees to radians: radians = degrees * pi / 180.

If we set it to Math.PI (equivalent to 180 degrees), then we get a partial circle (rotation is set to 45 degrees):

{
type: 'doughnut',
data: {
datasets: [
{
data: [94, 25, 72, 70, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
],
label: 'Dataset 1',
},
],
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
},
options: {
cutoutPercentage: 80,
rotation: -Math.PI / 2,
circumference: Math.PI,
legend: {
display: false,
},
},
}

Full options

Here’s the table of customizable doughnut and pie chart options:

Name Type Default Description
cutoutPercentage number 50 - for doughnut, 0 - for pie The percentage of the chart that is empty in the middle.
rotation number -0.5 * Math.PI Starting angle to draw slices from.
circumference number 2 * Math.PI Sweep to allow slices to cover.

You can customize each dataset with the following attributes:

Name Description
backgroundColor Color or list of colors for each arc/slice
borderColor Color or list of colors for each arc/slice
borderWidth Integer or list of integers defining the border size for each slice
weight List of numbers indicating the relative thickness of each dataset

Providing values for weight will cause the datasets to be drawn with a size relative to all other weights.

Labels

To learn how to customize doughnut and pie chart labels, follow this guide.

Other questions

Head back to docs to learn more or ask questions in the community.