borderAlign controls arc border overlap
The borderAlign property supports two values: 'center' (default) and 'inner'. When set to 'center', borders of adjacent arcs will overlap. When set to 'inner', all borders are guaranteed not to overlap.
charts/doughnut
22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
spacing and spacingMode properties for arc offset
The spacing property applies a fixed arc offset in pixels, similar to offset but applies to all arcs. The spacingMode property determines how spacing is applied and supports three values: 'angular' (default), 'proportional', and 'parallel'.
clip property controls overflow and clipping in pie/doughnut charts
The clip property controls how content is clipped relative to the chartArea. A positive value allows overflow, a negative value clips that many pixels inside the chartArea. A value of 0 clips at the chartArea boundary. Clipping can also be configured per side using an object: clip: {left: 5, top: false, right: -2, bottom: 0}.
Pie chart example with backgroundColor and hoverOffset
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, }; This example shows a pie chart with three colored segments that offset by 4 pixels on hover.
Doughnut chart example with backgroundColor and hoverOffset
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: 'doughnut', data: data, }; This example shows a doughnut chart with three colored arcs that offset by 4 pixels on hover.
Default overrides for doughnut and pie charts
Default values for doughnut charts can be changed via Chart.overrides.doughnut. Pie charts have a clone of these defaults at Chart.overrides.pie, with the only difference being cutout set to 0.
Doughnut and pie chart data structure
For pie and doughnut charts, datasets must contain an array of numbers in the data property. Chart.js totals all numbers and calculates the relative proportion of each. An array of labels must also be specified for tooltips and legend to display correctly.
weight property creates relative dataset thickness
The weight property defines the relative thickness of a dataset. Providing a weight value causes the pie or doughnut dataset to be drawn with thickness relative to the sum of all dataset weight values.
borderRadius for arcs can be number or object
If borderRadius is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerEnd). If it is an object, the properties outerStart, outerEnd, innerStart, and innerEnd can be specified individually.
Pie and doughnut charts are the same class with different defaults
Pie and doughnut charts are effectively the same class in Chart.js. The only differences are their default `cutout` value and their registered aliases. Pie charts default to a `cutout` of `0`, and doughnut charts default to a `cutout` of `'50%'`. Other than these defaults, they function identically.
Doughnut and pie chart dataset properties table
Doughnut and pie chart datasets support the following properties: | Name | Type | Scriptable | Indexable | Default | |------|------|-----------|-----------|----------| | backgroundColor | Color | Yes | Yes | 'rgba(0, 0, 0, 0.1)' | | borderAlign | 'center'\|'inner' | Yes | Yes | 'center' | | borderColor | Color | Yes | Yes | '#fff' | | borderDash | number[] | Yes | - | [] | | borderDashOffset | number | Yes | - | 0.0 | | borderJoinStyle | 'round'\|'bevel'\|'miter' | Yes | Yes | undefined | | borderRadius | number\|object | Yes | Yes | 0 | | borderWidth | number | Yes | Yes | 2 | | circumference | number | - | - | undefined | | clip | number\|object\|false | - | - | undefined | | data | number[] | - | - | required | | hoverBackgroundColor | Color | Yes | Yes | undefined | | hoverBorderColor | Color | Yes | Yes | undefined | | hoverBorderDash | number[] | Yes | - | undefined | | hoverBorderDashOffset | number | Yes | - | undefined | | hoverBorderJoinStyle | 'round'\|'bevel'\|'miter' | Yes | Yes | undefined | | hoverBorderWidth | number | Yes | Yes | undefined | | hoverOffset | number | Yes | Yes | 0 | | offset | number\|number[] | Yes | Yes | 0 | | rotation | number | - | - | undefined | | spacing | number | - | - | 0 | | spacingMode | 'angular'\|'proportional'\|'parallel' | - | - | 'angular' | | weight | number | - | - | 1 | Namespaces: data.datasets[index], options.datasets.doughnut, options.datasets.pie, options.elements.arc, and options.
Doughnut and pie chart config options
Doughnut and pie charts support the following configuration options: | Name | Type | Default | Description | |------|------|---------|-------------| | cutout | number\|string | '50%' for doughnut, '0' for pie | The portion of the chart cut out of the middle. If string ending with '%', percentage of chart radius. Number is considered pixels. | | radius | number\|string | '100%' | The outer radius of the chart. If string ending with '%', percentage of maximum radius. Number is considered pixels. | | rotation | number | 0 | Starting angle to draw arcs from. | | circumference | number | 360 | Sweep to allow arcs to cover. | | animation.animateRotate | boolean | true | If true, chart animates in with rotation animation. | | animation.animateScale | boolean | false | If true, animates scaling the chart from center outwards. |
Doughnut chart minimum components
Doughnut chart requires DoughnutController and ArcElement. It does not use scales.
Doughnut chart dynamically add data
To add a new data point to a doughnut chart at runtime, push a new label to chart.data.labels, then push a new value to each dataset's data array, and call chart.update().
Doughnut chart basic configuration example
A doughnut chart is created with type 'doughnut'. The configuration specifies responsive: true, and plugins for legend position ('top') and title display. The dataset includes a label, data array, and backgroundColor array matching the number of data points.
Doughnut chart data structure
Doughnut chart data requires labels array and datasets array. Each dataset has a label property, a data array containing numeric values, and a backgroundColor array specifying a color for each data point.
Pie chart tooltip title callback with multi-series mapping
For multi-series pie charts, the tooltip title callback can calculate the correct label index by combining the datasetIndex and dataIndex: const labelIndex = (context[0].datasetIndex * 2) + context[0].dataIndex. This retrieves the appropriate label from chart.data.labels and concatenates it with formattedValue.
Pie chart legend onClick to toggle dataset visibility
The legend onClick handler can toggle dataset visibility by calling legend.chart.getDatasetMeta(legendItem.datasetIndex).hidden and toggling it based on legend.chart.isDatasetVisible(legendItem.datasetIndex), then calling legend.chart.update() to refresh the chart.
Multi-series pie chart with custom legend generateLabels
A multi-series pie chart example showing how to display multiple pie datasets with synchronized legend labels. The generateLabels function retrieves the default label list using Chart.overrides.pie.plugins.legend.labels.generateLabels, flattens the backgroundColor arrays from all datasets, then modifies each label to map its index to the correct dataset index using (label.index - label.index % 2) / 2, and updates fillStyle to match the dataset colors.
Doughnut circumference now in degrees in v3
In Chart.js 3.x, the doughnut `circumference` option is now in degrees. The default changed from `2π` to `360`.
Doughnut cutoutPercentage renamed to cutout in v3
In Chart.js 3.x, the doughnut `cutoutPercentage` option was renamed to `cutout` and now accepts pixels as a number and percent as a string ending with `%`.
Doughnut rotation now in degrees in v3
In Chart.js 3.x, the doughnut `rotation` option is now in degrees with 0 at the top. The default changed from `-½π` to `0`.