DonutChart

Basic

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

Category	Value	Percentage
Pass	42	49%
Fail	8	9%
N/A	12	14%
To do	24	28%

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

<DonutChart
  data={[
    { label: 'Pass', value: 42, color: 'var(--color-success)' },
    { label: 'Fail', value: 8, color: 'var(--color-danger)' },
    { label: 'N/A', value: 12, color: 'var(--color-inactive)' },
    { label: 'To do', value: 24, color: 'var(--color-warning)' },
  ]}
  aria-label="Conformance summary"
>
  <strong>86</strong>
  <span>criteria</span>
</DonutChart>

Small / progress indicator

Use smaller size and thickness for inline progress indicators.

Category	Value	Percentage
Complete	75	75%
Remaining	25	25%

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

Accessibility

• SVG has role="img" with aria-label
• Each segment is focusable with label, value, and percentage announced
• Arrow keys navigate between segments (wraps around)
• A hidden <table> provides the data with percentages for screen readers
• Zero-value segments are skipped (not rendered or focusable)

Props

Prop	Type	Default	Description
data	DonutDatum[]	—	Array of { label, value, color }
size	number	160	Diameter in pixels
thickness	number	24	Ring thickness in pixels
children	ReactNode	—	Centre content (summary text, number, etc.)
aria-label	string	—	Required. Describes the chart.
className	string	—