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.