Components
DonutChart
Token-driven donut chart rendered as a CSS conic-gradient, with a center label and legend.
How it works
The ring is a CSS conic-gradient whose stops are semantic --cajon-* colors
(via the chart ramp by default), so it re-themes automatically — there is no
charting dependency. The hole is an opaque paper circle that can hold a caption
and an emphasized total. The chart is exposed as role="img" with a composite
label ("Rent & Living 60%, Investment 15%, …"), so it reads as more than color.
Segment values are relative weights — they don't need to sum to 100; percentages are computed for you.
Usage
import { DonutChart } from '@cajon-ui/react';
<DonutChart
segments={[
{ label: 'Rent & Living', value: 60 },
{ label: 'Investment', value: 15 },
{ label: 'Food & Drink', value: 13 },
{ label: 'Education', value: 12 },
]}
centerLabel="Total expense"
centerValue="$3,500"
/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
segments | DonutSegment[] | — | { label, value, color? } slices, in order |
size | number | 168 | Outer diameter in px |
thickness | number | 28 | Ring thickness in px |
centerLabel | ReactNode | — | Caption rendered in the hole |
centerValue | ReactNode | — | Emphasized total rendered in the hole |
showLegend | boolean | true | Show the legend rows beside the ring |
colors | string[] | CHART_RAMP | Override per-slice colors by index |