Component

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.
data
DOM renderImage render
Donut chartDefault

Workload split

ready
64%Router

Playground

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

Loading playground

Rendered matrix

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

Default

Medium ring with center label.

Workload split

ready
64%Router
Router52Memory38Tools44Eval31
Render state

Thin

Thin ring for quiet summaries.

Workload split

ready
64%Router
Router52Memory38Tools44Eval31
Render state

Thick

Thick ring for primary scorecards.

Workload split

ready
64%Router
Router52Memory38Tools44Eval31
Render state

Plain

Ring without center label.

Workload split

ready
Router52Memory38Tools44Eval31
Render state

Compact

Compact ring for metric-adjacent dashboard tiles.
64%Router
Render state

Loading

Stable loading state for async generated output.

Workload split

loading
Loading data
Render state

Empty

No-data state inside the donut shell.

Workload split

empty
No data
Render state

Error

Failed data state with an explicit message.

Workload split

error
Could not load workload split.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
title *string-Chart title.
descriptionstring-Muted supporting copy.
segmentsreadonly DataPoint[][]Part-to-whole segments.
centerLabelstring-Optional center metric override.
showCenterLabelbooleantrueShows the center metric and leading segment label.
thickness'thin' | 'medium' | 'thick'mediumRing stroke thickness.
state'ready' | 'loading' | 'empty' | 'error'readyAsync data state.
heightnumber220Plot stage height.
legendbooleantrueShows derived legend indicators.
surface'raised' | 'sunken' | 'transparent'raisedPlot stage surface.