DonutChart
DonutChart — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
DonutChart — Prism component.
Accessibility
Each chart ships an accessible fallback (a visually-hidden data table / aria-label summary) so the data is available to screen readers, not just sighted users. Colour is paired with shape/label, never used alone.
Import
const { DonutChart } = window.PrismDesignSystem_39d121;
Examples
With center label
<DonutChart data={mix} centerValue="766" centerLabel="SKUs" />
Props
| Prop | Type | Required | Description |
|---|---|---|---|
data | DonutDatum[] | Yes | |
size | number | — | |
thickness | number | — | |
centerValue | React.ReactNode | — | |
centerLabel | React.ReactNode | — | |
showLegend | boolean | — | |
formatValue | (v: number) => React.ReactNode | — | |
caption | string | — |