DonutChart

Basic

Each datum has a label, value, and color. Children render in the centre.

Conformance summary

Donut chart, 4 points. Values from 8 to 42.

Show data table

import { DonutChart } from '@eekodigital/raster';

<DonutChart
  data={[
    { label: 'Pass', value: 42, color: 'var(--demo-good)' },
    { label: 'Fail', value: 8, color: 'var(--demo-bad)' },
    { label: 'N/A', value: 12, color: 'var(--demo-neutral)' },
    { label: 'To do', value: 24, color: 'var(--demo-warn)' },
  ]}
  title="Conformance summary"
>
  <strong>86</strong>
  <span>criteria</span>
</DonutChart>

Small / progress indicator

Use smaller size and thickness for inline progress indicators.

75% complete

Donut chart, 2 points. Values from 25 to 75.

Show data table

<DonutChart
  data={[
    { label: 'Complete', value: 75, color: 'var(--demo-good)' },
    { label: 'Remaining', value: 25, color: 'var(--demo-muted)' },
  ]}
  size={80}
  thickness={10}
  title="75% complete"
>
  <strong>75%</strong>
</DonutChart>

Accessibility

• A role="figure" named by the visible title and described by a generated summary (chart type, series and point counts, range).
• The SVG is a role="group" with aria-roledescription="chart"; no graphics-* roles.
• Each segment is labelled {label}: {value} ({percent}), 2 of 4. Zero-value segments are skipped. With onSelect, selectedIndex or a click handler, marks are role="button" with aria-pressed; otherwise they’re static role="img".
• A visible Show data table button (aria-expanded) reveals a real table captioned Data for {title}, with th scope headers and values run through formatValue.
• Escape (inside the chart only) clears the selection and announces it in a polite live region; it doesn’t close a surrounding dialog.
• The draw-in animation is a CSS class, so prefers-reduced-motion switches it off.
• Animations stop under prefers-reduced-motion. In forced-colours mode marks use system colours, told apart by dash pattern and marker shape.

Key	Action
← → ↑ ↓	Previous / next segment (wraps)
Home / End	First / last segment
Tab	Leave the chart
Enter / Space	Toggle selection (interactive marks)
Escape	Hide the tooltip and clear selection

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
data	DonutDatum[]	—	Required. { label, value, color }.
size	number	—	Fixed diameter in px. Omit to fill the container’s width (square).
thickness	number	24	Ring thickness in px.
children	ReactNode	—	Centre content.
showLegend	boolean	false	Show a legend.
formatValue	(value: number) => string	Intl.NumberFormat	Formats values in ticks, marks and the table. Defaults to Intl.NumberFormat(labels.locale).
onSegmentClick	(datum, index) => void	—	Makes segments buttons.
selectedIndex	number | null	—	Controlled selection.
onSelect	(index | null) => void	—	Makes segments buttons.
title	string	—	Required. Visible title: names the figure and captions the data table.
hideTitle	boolean	false	Hide the title visually. It still names the chart for assistive technology.
labels	Partial<ChartLabels>	English	Generated strings and the number locale. See Accessibility.
dataTable	“disclosure” | “visually-hidden”	“disclosure”	How the data table is offered.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export. See Exporting charts.
className	string	—	Class on the figure.