Radial Chart
Token-driven radial bar chart built on Recharts v3 — one ring per category with a muted track, configurable sweep angle, and full light/dark theming.
Playground
Installation
pnpm add @tessinaui/ui rechartsUsage
import { RadialChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";
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 },
];
<RadialChart data={data} config={config} dataKey="visitors" nameKey="browser" />Set startAngle / endAngle for a half-circle gauge (e.g. 180 → 0).
Examples
Default
A multi-ring radial chart with one ring per category in brand tones.
Half circle
Set startAngle and endAngle (e.g. 180 → 0) to sweep a half circle.
In-bar labels
Enable showLabels to render category names inside each ring.
Rounded
Control the arc end-cap rounding with rounded — from none to pill-shaped full.
Sizes
Three square size caps via size — sm, md, and lg.
States
Built-in loading skeleton and empty state.
Core props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, string | number | null>[] | — | One row per ring. |
config | ChartConfig | — | Ring metadata keyed by nameKey value. |
dataKey | string | — | Datum key holding each ring's value. |
nameKey | string | — | Datum key holding the ring name (matches a config key). |
radius | number | 4 | Bar corner radius. |
showBackground | boolean | true | Muted track behind each bar. |
startAngle / endAngle | number | 90 / -270 | Sweep angles (degrees). |
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. |
Radar Chart
Token-driven radar (spider) chart built on Recharts v3 for comparing multiple metrics across one or more series, with full light/dark theming.
Radio
A form control that lets users select exactly one option from a group. Five sizes, five intents, label/description/error patterns, RadioGroup compound component, and RadioCard full-surface variant.