Donut chart

Part-to-whole ring summary with controlled center metric and thickness.

Donut chart works best for a small number of stable segments. It should summarize, not explain an entire distribution.

ready

64%Router

Router52Memory38Tools44Eval31

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

ready

64%Router

Router52Memory38Tools44Eval31

Default

Medium ring with center label.

ready

64%Router

Router52Memory38Tools44Eval31

Thin

Thin ring for quiet summaries.

ready

64%Router

Router52Memory38Tools44Eval31

Thick

Thick ring for primary scorecards.

ready

Router52Memory38Tools44Eval31

Plain

Ring without center label.

Props

Name	Type	Default	Description
`title *`	`string`	-	Chart title.
`description`	`string`	-	Muted supporting copy.
`segments`	`readonly DataPoint[]`	`[]`	Part-to-whole segments.
`centerLabel`	`string`	-	Optional center metric override.
`showCenterLabel`	`boolean`	`true`	Shows the center metric and leading segment label.
`thickness`	`'thin' \| 'medium' \| 'thick'`	`medium`	Ring stroke thickness.
`state`	`'ready' \| 'loading' \| 'empty' \| 'error'`	`ready`	Async data state.
`height`	`number`	`220`	Plot stage height.
`legend`	`boolean`	`true`	Shows derived legend indicators.
`surface`	`'raised' \| 'sunken' \| 'transparent'`	`raised`	Plot stage surface.