Pie Chart
Token-driven pie and donut chart built on Recharts v3, with config-driven slice colours, optional labels, legend, and full light/dark theming.
Playground
Installation
pnpm add @tessinaui/ui rechartsUsage
import { PieChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";
// config is keyed by each slice's nameKey value
const config: ChartConfig = {
chrome: { label: "Chrome", color: "var(--chart-1)" },
safari: { label: "Safari", color: "var(--chart-2)" },
firefox: { label: "Firefox", color: "var(--chart-3)" },
};
const data = [
{ browser: "chrome", visitors: 275 },
{ browser: "safari", visitors: 200 },
{ browser: "firefox", visitors: 187 },
];
<PieChart data={data} config={config} dataKey="visitors" nameKey="browser" donut />Each slice's colour resolves from config[row[nameKey]].color, so the nameKey
values must match config keys. Pass donut for a cut-out centre.
Examples
Default
A basic pie chart with a legend and tokenised slice colours.
Donut
Pass donut to cut out the centre for a ring layout.
Labels
Render value labels with leader lines on each slice using showLabels.
Rounded slices
Soften slice corners with the rounded scale — shown here on a donut.
Loading
A shape-aware skeleton while data is fetching, toggled with loading.
Empty
A custom emptyState message when there is no data to display.
Core props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, string | number | null>[] | — | One row per slice. |
config | ChartConfig | — | Slice metadata keyed by nameKey value. |
dataKey | string | — | Datum key holding each slice's value. |
nameKey | string | — | Datum key holding the slice name (matches a config key). |
donut | boolean | false | Cut out the centre. |
showLabels | boolean | false | Render value labels on slices. |
size | "sm" | "md" | "lg" | "md" | Square size cap. |
showLegend / showTooltip | boolean | — | Toggle chart chrome. |
loading | boolean | false | Render the skeleton. |
error | ReactNode | — | Render an error message instead of the chart. |
emptyState | ReactNode | "No data to display" | Shown when data is empty. |
Pagination
Navigate between pages of content. Five sizes, three active-page variants (default/primary/outline), five border-radius options (none/sm/md/lg/full), three nav styles (icon/label/none), smart ellipsis truncation, controlled/uncontrolled, and LTR/RTL support.
Popover
A floating panel that appears next to its trigger and holds interactive content. Click-activated, with full keyboard support, positioning, an optional arrow, and compound parts for header, body, and footer.