Donut chart component: the slices of a pie drawn as a ring around an empty center, which can hold a short label and subLabel — typically the total the slices add up to. Takes the same data as the Pie Chart, with animated transitions.
The controls edit the chart's config live; each field is described in the Configuration table.
Change the settings above and it redraws.
const config: PcacDonutChartConfig = {
data: [...],
innerRadius: 0.6,
label: '2708',
subLabel: 'total',
};<pcac-donut-chart [config]="config" (sliceClicked)="onClicked($event)" />
import { PcacDonutChart, PcacDonutChartConfig } from '@pioneer-code/pioneer-charts';| Name | Description |
|---|---|
| data | Collection of PcacData objects. |
| height | Height of chart component. Default is 200px. |
| ariaLabel | What the chart shows, for screen readers — e.g. 'Sales by month, 2026'. The chart is announced as a group with this name, and each bar, slice or point inside it by its own key and value (see Accessibility). When omitted, its type is used: 'Bar chart', 'Pie chart', 'Line chart' and so on. |
| innerRadius | Radius of the hole as a fraction of the chart's radius, from 0 (no hole — a pie) to 0.9; values outside that are clamped. Default 0.6. |
| label | Large text centered in the hole, e.g. a total. Sized to the hole and shrunk to fit across it; left out if it would have to go below 8px. Not drawn when omitted. |
| subLabel | A smaller line under label, fitted the same way. Not drawn when omitted. |
| labelColor / subLabelColor | Any CSS color for the two lines, in place of the theme's $gray-800 and $gray-600. Applied as the --pcac-donut-center-label-color / --pcac-donut-center-sub-label-color custom properties on the chart's .pcac-donut-center group, which a stylesheet can set on an ancestor instead. |
| colorOverride | Slice colors, any CSS color, used in data order instead of the theme palette: the first slice takes the first color. Repeated when there are more slices than colors. Omitted or empty, the theme palette is used. To match a legend, give each of its items the same color with colorOverride. |
| Binding | Description | Payload |
|---|---|---|
| (sliceClicked)="onClicked($event)" | Emitted when a slice is clicked. | PcacData |