# 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 - theircutout. This equates to what portion of the inner should be cut out. This defaults to0 for pie charts, and'50%' for doughnuts.

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

const config={type:'doughnut',data: data,};

const data={labels:['Red','Blue','Yellow'],datasets:[{label:'My First Dataset',data:[300,50,100],backgroundColor:['rgb(255, 99, 132)','rgb(54, 162, 235)','rgb(255, 205, 86)'],hoverOffset:4}]};

const config={type:'pie',data: data,};

const data={labels:['Red','Blue','Yellow'],datasets:[{label:'My First Dataset',data:[300,50,100],backgroundColor:['rgb(255, 99, 132)','rgb(54, 162, 235)','rgb(255, 205, 86)'],hoverOffset:4}]};

# 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 allarc 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.

All these values, ifundefined, fallback to the scopes described inoption resolution

# General

# Styling

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

All these values, ifundefined, fallback to the associatedelements.arc.* options.

# Border Alignment

The following values are supported forborderAlign.

• '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, theouterStart property defines the outer-start corner's border radius. Similarly, theouterEnd,innerStart, andinnerEnd properties can also be specified.

# Interactions

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

All these values, ifundefined, fallback to the associatedelements.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.

# Default Options

We can also change these default values for each Doughnut type that is created, this object is available atChart.overrides.doughnut. Pie charts also have a clone of these defaults available to change atChart.overrides.pie, with the only difference beingcutout 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 the numbers and calculate the relative proportion of each.

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

data={datasets:[{data:[10,20,30]}],// These labels appear in the legend and in the tooltips when hovering different arcslabels:['Red','Yellow','Blue']};

← Bubble Chart Line Chart →