Preview Updated 2026-05-10

Donut chart

Hollow pie chart that can show a value or label in the center.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

<CfDonutChart ... />

<CfDonutChart ... />

Different ring thicknesses

thickness controls the ring thickness (with the same size, thicker is more pie-like, thinner is more ring-like).

<CfDonutChart :segments="data" :thickness="14" center-value="78%" center-label="Completion" />
<CfDonutChart :segments="data" :thickness="22" />
<CfDonutChart :segments="data" :thickness="32" />

<CfDonutChart segments={data} thickness={14} centerValue="78%" centerLabel="Completion" />
<CfDonutChart segments={data} thickness={22} />
<CfDonutChart segments={data} thickness={32} />

API

Prop	Type	Default	Description
`segments`	`DonutSegment[]`	`—`	{ name, value, colorIndex? }[]
`size`	`number`	`180`	Diameter
`thickness`	`number`	`24`	Ring thickness
`centerValue / centerLabel`	`string \| number`	`—`	Center text
`showLegend`	`boolean`	`true`