Donut Chart
Part-to-whole proportions with an optional centre label. Accepts any React node as the centre content — use it for a total, a metric, or a status indicator.
Examples
Centre label
10.6k
visitors
Thin ring
10.6k
Props
data*
{ name: string; value: number }[]
Array of slice objects.
colors= palette
string[]
Override chart palette colours for this instance.
centerLabel= —
ReactNode
Content rendered in the centre of the donut hole.
valueFormatter= —
(value: number) => string
Format values in the tooltip.
showLegend= true
boolean
Show the slice legend below the chart.
innerRadius= '60%'
string | number
Inner radius of the donut ring.
outerRadius= '80%'
string | number
Outer radius of the donut ring.
height= 300
number
Fixed height of the chart in px.
className= —
string
Extra class on the outer container.
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | { name: string; value: number }[] | — | Array of slice objects. |
| colors | string[] | palette | Override chart palette colours for this instance. |
| centerLabel | ReactNode | — | Content rendered in the centre of the donut hole. |
| valueFormatter | (value: number) => string | — | Format values in the tooltip. |
| showLegend | boolean | true | Show the slice legend below the chart. |
| innerRadius | string | number | '60%' | Inner radius of the donut ring. |
| outerRadius | string | number | '80%' | Outer radius of the donut ring. |
| height | number | 300 | Fixed height of the chart in px. |
| className | string | — | Extra class on the outer container. |