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.
Playground
Installation
pnpm add @tessinaui/ui rechartsUsage
import { RadarChart } from "@tessinaui/ui";
import type { ChartConfig } from "@tessinaui/ui";
const config: ChartConfig = {
productA: { label: "Product A", color: "var(--chart-1)" },
productB: { label: "Product B", color: "var(--chart-3)" },
};
const data = [
{ metric: "Speed", productA: 120, productB: 90 },
{ metric: "Reliability", productA: 98, productB: 130 },
{ metric: "Comfort", productA: 86, productB: 130 },
];
<RadarChart data={data} config={config} categoryKey="metric" />Examples
Default
A single-series radar comparing one product across six metrics.
Multiple series
Two radars overlaid in distinct brand tones, with a legend.
Sizes
Three square size caps — sm, md, and lg.
Lines only
Outline-only radar with fillOpacity={0} so the shape reads as a stroke.
Grid types
The polar grid as concentric polygons or circles via gridType.
States
The loading skeleton alongside the empty state.
Core props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, string | number | null>[] | — | One row per axis (spoke). |
config | ChartConfig | — | Series metadata (label, color). |
categoryKey | string | — | Datum key for the angular axis. |
series | string[] | all config keys | Which series to plot. |
fillOpacity | number | 0.1 | Per-series fill opacity. |
showDots | boolean | true | Vertex markers. |
size | "sm" | "md" | "lg" | "md" | Square size cap. |
showGrid / 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. |
PromptInput
AI chat input with auto-grow textarea, send/stop swap, a "+" options menu, model selector, suggestion chips, drag-drop attachments, voice controls, inline & stacked layouts, RTL and a loading skeleton.
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.