Donut chart

Standalone donut/pie chart. Does not use ChartRoot. Renders arc segments with center label.

Primitive: ChartDonut· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartDonut } from '@ramtt/charts'

<ChartDonut
  data={[{ label: 'Z2', value: 60 }, { label: 'Z3', value: 25 }, { label: 'Z5', value: 15 }]}
  valueAccessor={(d) => d.value}
  labelAccessor={(d) => d.label}
  colors={['#16A34A', '#F59E0B', '#EF4444']}
  centerLabel="Zone split"
  centerValue="100%"
/>

Props

Prop	Type	Default	Description
data*	`readonly any[]`	—	Data items
valueAccessor*	`(d) => number`	—	Value accessor
colors*	`string[]`	—	Segment colors
innerRadius	`number`	0.6	Inner radius ratio (0=pie, 1=thin ring)
size	`number`	220	Diameter in pixels
centerLabel	`string`	—	Center text label
centerValue	`string`	—	Center text value