Radar chartPro
Two or three profiles on one web: shapes morph when you swap a profile, and a sweep across the axes compares values in place.
Live · keyboard ready
Lisbon compared with
Office locations, Lisbon and Berlin. Lisbon: Talent pool 64, Affordability 78, Transit 71, Time zone fit 88, Quality of life 86, Tax climate 66. Berlin: Talent pool 86, Affordability 58, Transit 92, Time zone fit 80, Quality of life 78, Tax climate 46.
| Measure | Lisbon | Berlin |
|---|---|---|
| Talent pool | 64 | 86 |
| Affordability | 78 | 58 |
| Transit | 71 | 92 |
| Time zone fit | 88 | 80 |
| Quality of life | 86 | 78 |
| Tax climate | 66 | 46 |
- Comparing the profile of a few options across shared measures.
- Showing strengths and gaps at a glance, such as scores or ratings.
- Use bar-chart when the precise difference on one measure matters.
- Use plan-matrix for feature comparisons with yes or no values.
- Avoid more than three profiles; the shapes stop being readable.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { RadarChart } from "@/registry/components/radar-chart/radar-chart"; const axes = [ { key: "talent", label: "Talent pool" }, { key: "afford", label: "Affordability" }, { key: "transit", label: "Transit" }, { key: "life", label: "Quality of life" }, { key: "tax", label: "Tax climate" },]; export function Offices({ rival }: { rival: RadarSeries }) { return <RadarChart axes={axes} series={[lisbon, rival]} label="Office locations" />;}RadarChart
Two or three profiles on one web of five to eight measures. Profiles are drawn by position, so replacing one morphs its shape into the next. Moving across the web picks the nearest axis and compares every profile's value there.
PropTypeDefaultDescription
axesRequiredRadarAxis[]–Measures around the web, clockwise from the top: { key, label, max? }. At least three.seriesRequiredRadarSeries[]–Up to three profiles: { key, label, values }. They take the series hues in order, the first derived from the accent; replacing the series at a position morphs that shape.labelRequiredstring–What is compared. Names the chart, the summary, and the table.maxnumber100Default top of every axis.ringsnumber4Concentric guides.sizenumber320Largest web diameter in pixels. It shrinks to fit narrow containers.formatValue(value: number, axis: RadarAxis) => string–Formats values in the tooltip and table.activeAxisstring | null–Controlled axis in focus.onActiveAxisChange(key: string | null) => void–Called as the axis in focus changes.legendbooleantrueProfile names with a line key. Hovering or pressing one brings its shape forward.emptyLabelstring"No data"Message with fewer than three axes or no series.refRef<HTMLElement>–Forwarded to the figure.classNamestring–Extra class on the figure.- Tab
- Focuses the web and reads the first axis, then the legend.
- ArrowRightorArrowDown
- Next axis, clockwise.
- ArrowLeftorArrowUp
- Previous axis.
- HomeorEnd
- First or last axis.
- Escape
- Clears the reading.
- The web is a focusable group with a roledescription and instructions; shapes and labels are aria-hidden.
- A polite live region reads the axis and every profile's value there.
- A visually hidden summary and a table list every value by measure and profile.
- Profiles are named in the legend and the tooltip with a line key, so identity never relies on colour alone.
- Swapping a profile morphs its shape from the one on screen with a gently bouncing spring.
- The web unfolds from the centre the first time it is seen.
- Vertex markers and the tooltip glide between axes on springs; the tooltip sits past the axis label so the label and vertices stay visible.
- Reduced motion swaps shapes and moves markers immediately.
- The web shrinks to the container and the label ring tightens below 360px; axis labels wrap.
- The tooltip clamps inside the chart at every width.
- Touch reads axes with a press and drag.
- Shapes are rewritten from one paint function during morphs; React renders once per change.
- One ResizeObserver measures the container.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for the overall shape of two or three profiles on the same five to eight measures: products, plans, locations, candidates.
- Put the subject of the story first so it takes the accent derived first series, and drive the second position from a picker to get the morph.
- Every axis must point the same way, higher is better, or the shape misleads.
- For exact comparison of values, pair it with a table or use bar-chart.
The full library index for assistants is at /llms.txt.