Donut Chart
ProCircular chart with a hollow centre, rendered as SVG arcs, for displaying proportional data. The centre space shows a summary label (total, percentage, or key metric). Includes an external legend mapping colours and patterns to categories. Best for 2–6 segments; use a bar chart for more categories.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard donut with centre label showing the total or primary metric. | Use for part-to-whole comparisons with 2–6 categories — budget allocation, traffic sources. |
| With Center | ||
| With Legend | Donut paired with a side or bottom legend listing categories, values, and percentages. | Use when the chart stands alone and segments need clear identification. |
Usage Guidelines
Limit to 6 segments — group smaller values into an "Other" category.
Use for comparing precise values — bar charts are more accurate for that.
Show the total or key metric in the centre label.
Display more than 6 segments — small slices become indistinguishable.
Use direct labels or a legend — never rely on colour alone.
Use 3D perspective or exploded slices — they distort proportions.
Include a hidden data table for screen reader access.
Omit percentage labels when the goal is to show proportions.
Code
Design Tokens
Accessibility
- Use role="img" with aria-label describing the chart.
- Provide aria-describedby linking to a text summary with all segment values.
- Include a hidden data table with categories, values, and percentages.
- Use pattern fills (hatching, dots) alongside colour for each segment.
- Interactive segments must be focusable and announce their label and value.