Charts
DonutChart
Parts of a whole as a ring, with content in the middle and a legend of values and shares. Slices draw in once and lift on hover.
Usage
Use it for:
- One whole split into 2–6 parts (spend by category, task status).
Avoid it when:
- Comparing parts across several wholes: use a stacked BarChart.
- More than ~6 slices: group the small ones into "Other" or use a BarChart.
- Precise comparison of similar values: bars read better.
Installation
Install the package (React 19):
terminal
terminal
terminal
Import the styles once, in your app entry or root layout:
/src/main.tsx
Examples
Spend by category
Spent$2,360
| Category | Value | Share |
|---|---|---|
| Housing | $1,450 | 61.4% |
| Food | $412 | 17.5% |
| Transport | $164 | 6.9% |
| Shopping | $238 | 10.1% |
| Utilities | $96 | 4.1% |
Small, without legend
75%
| Category | Value | Share |
|---|---|---|
| Done | 18 | 75% |
| Open | 6 | 25% |
API Reference
DonutChart
| Prop | Type | Default |
|---|---|---|
data | { label: string; value: number; color?: Color }[] | |
center | ReactNode | |
size | number | 176 |
thickness | number | 14% of size |
legend | boolean | true |
label | string | |
valueFormat | (value: number) => string | grouped digits |
className | string | |
style | CSSProperties | |
id | string |
Accessibility
Keyboard:
- Tab: focuses the chart (focus ring).
- → / ↓ and ← / ↑: move to the next / previous data point and show its tooltip.
- Home / End: first / last point. Escape: hide the tooltip.
ARIA and semantics:
- The SVG is
role="img"named bylabel, with a description of the keys. - A visually hidden
<table>(caption =label) holds every value, formatted withvalueFormat, for screen readers. - Keyboard moves are read by a polite live region ("Mar: Revenue $5,150, Spending $1,808").
- Series are named in the legend, tooltip and table, so color is never the only key.
- The entrance animation does not play under reduced motion; the chart renders in its final state on the server.
© 2026 Motion. Internal documentation.