Primitive

Donut Ring

Donut chart ring, track, segment, and centered value anatomy.

Use Donut Ring primitives for circular progress and part-to-whole chart marks. Components own segment math and accessibility copy.
data
DOM renderImage render
Donut RingDefault
72%accepted

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

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

Default

Donut ring with track, segment, and center value.
72%accepted
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
DonutPlot.thickness'thin' | 'medium' | 'thick'mediumDonut stroke token.
DonutTrack.cx/cy/r *number | string-Track circle geometry.
DonutSegment.strokeDasharraystring-Segment arc ratio.
DonutCenter.value *ReactNode-Centered value.