Data viz
Radar
A spider chart for comparing a few things across the same set of dimensions. Each axis is one metric; each coloured polygon is one subject — so shape, not just height, tells the story of where something is strong or weak. Toggle series in the legend to compare cleanly.
npx shadcn@latest add @orbit/radar-chartOverview
Live — hover a legend chip to bring one series forward, or click it to hide that series and compare the rest.
Capabilities
A radar turns a row of numbers into a silhouette, so two subjects can be told apart at a glance by their profile.
Options
Any shared scale works — set max to the axis ceiling. Colors default to the fixed CHART_SERIES palette by position, and interactiveLegend=false swaps the toggle chips for the family’s plain legend row.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | string[] | — | Axis labels, clockwise from 12 o’clock. 3–8 axes read best. |
| series | { id?: string; name: string; values: number[]; color?: string }[] | — | One polygon per series; values map to axes by index and clamp to [0, max]. Colors default to CHART_SERIES by position. |
| max | number | 5 | Shared axis maximum. Every axis runs 0..max from the centre. |
| levels | number | 5 | Number of polygon grid rings. |
| height | number | 420 | Total height in px, legend included. Width is responsive. |
| showLegend | boolean | true | Legend row under the plot. Never rendered for one series. |
| interactiveLegend | boolean | true | Pill chips that toggle (click) and isolate (hover) series; false renders a plain static legend. |
| showTooltip | boolean | true | Dark tooltip listing every visible series at the hovered axis. |
| formatValue | (v: number) => string | String | Formats tooltip values. |
| ariaLabel | string | — | Plain-language summary for the chart’s role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Radar is best for 3–8 axes and 1–3 series on a shared, meaningful scale. More of either and the overlaps become unreadable.
Normalise the axes
Put every metric on a common 0–N scale. Mixing raw units (days, %, count) makes the shape meaningless.
Overlay too many series
One to three polygons stay legible. Four or more overlapping fills turn into mud — use small multiples instead.
Order axes intentionally
Related dimensions side by side make the shape readable. A random axis order produces a meaningless silhouette.
Compare absolute areas
Radar area scales with the square of values and depends on axis order — read each axis, don’t eyeball total area.
Keyboard & accessibility
The chart renders as a labelled image; the legend chips are keyboard-operable buttons, and hiding a series never recolors the rest.