Data

DonutChart

The Chart.js doughnut type in chart ink — ordinal segments, center readout.

Preview

components/data/DonutChart.jsx

14open

strong6
mixed2
downtrend4
unpriced2

The Chart.js doughnut type in chart ink. Segments step down the ink ramp in data order — value carries the order, never hue. Keep the legend on.

Usage

src/components/ui/DonutChart.tsx

tsx

import { DonutChart } from "@/components/ui/DonutChart";

<DonutChart
  centerValue={14}
  centerLabel="open"
  data={[
    { label: "strong", value: 6 },
    { label: "mixed", value: 2 },
    { label: "downtrend", value: 4 },
  ]}
/>

API

props

Prop	Type	Default	Description
data	DonutSegment[]	—	{ label, value, emphasis? } — order the data ordinally; the ramp encodes it.
size	number	168	Diameter in px.
thickness	number	16	Ring thickness in px.
centerValue	ReactNode	—	Large center readout (defaults to the total).
centerLabel	ReactNode	—	Small uppercase line under the readout.
legend	boolean	true	Dot + label + mono value legend.

Tokens consumed

semantic only

--ink-200--ink-400--ink-500--ink-600--ink-700--rust-500--color-bg-hover--font-mono