Components
Donut
Zero-dependency SVG pie and donut chart with theme-synced palette, hover focus with center readout, and a toggleable legend
Part of the chart family, sharing the chart-kit math layer with Chart, Radar and Sparkline — reach for Chart when you need axes or large time series.
Installation
- $npx litefy@latest add donut
- $pnpm dlx litefy@latest add donut
- $yarn dlx litefy@latest add donut
- $bun --bun litefy@latest add donut
Usage
Donut
A basic donut chart with the default palette and legend.
1,200
"use client";
import { Donut } from "@/ui";
const data = [
{ label: "Direct", value: 420 },
{ label: "Search", value: 365 },
{ label: "Social", value: 210 },
{ label: "Email", value: 140 },
{ label: "Referral", value: 65 },
];
export default function DonutBasicDemo() {
return <Donut data={data} ariaLabel="Website traffic by channel" className="max-w-xs" />;
}
Pie
variant="pie" closes the hole and moves the readout below the chart.
13,130
"use client";
import { Donut } from "@/ui";
const data = [
{ label: "Free", value: 8420 },
{ label: "Pro", value: 3160 },
{ label: "Team", value: 1240 },
{ label: "Enterprise", value: 310 },
];
export default function DonutPieDemo() {
return (
<Donut
data={data}
variant="pie"
gap={1.5}
ariaLabel="Subscribers by plan"
valueFormatter={(value) => value.toLocaleString()}
className="max-w-xs"
/>
);
}
Value Formatter
Here values are formatted as US dollars via valueFormatter; the default is plain toLocaleString.
$20,850
"use client";
import { Donut } from "@/ui";
const data = [
{ label: "Subscriptions", value: 12480 },
{ label: "One-time sales", value: 5320 },
{ label: "Ads", value: 2160 },
{ label: "Affiliate", value: 890 },
];
export default function DonutValueFormatterDemo() {
return (
<Donut
data={data}
valueFormatter={(value) => `$${value.toLocaleString()}`}
ariaLabel="Monthly revenue by source"
className="max-w-xs"
/>
);
}
API Reference
Donut
| Prop | Type | Default | Description |
|---|---|---|---|
data | DonutDatum[] | - | Slices: { label, value, color? } |
variant | "pie" | "donut" | "donut" | pie closes the hole and moves the readout below the chart |
gap | number | 2 | Angular gap between slices in degrees |
valueFormatter | (value: number) => string | toLocaleString | Formats values shown in the readout |
showLegend | boolean | true | Renders the clickable legend above the chart |
className | ClassNameValue | - | Extra classes appended to the root element |
classNames | DonutClassNames | - | Slot overrides: root / svg / segment / legend |
styles | DonutStyles | - | Slot inline styles, matching the classNames slots |