Radar chartPro
Compare series across dimensions; shapes morph and legend toggles series.
When to use
- Comparing 2–4 items across 5–8 qualities: products, skills, plans.
When not to use
- Precise comparisons: use a bar chart.
- More than four series: it turns into spaghetti.
Installation
Usage
Import it from @/components/ui/radar-chart after installing.
example.tsx
import { RadarChart } from "@/components/ui/radar-chart";
<RadarChart axes={["Speed", "Design", "Docs"]} max={10} series={[{ key: "us", label: "Us", color: "#84cc16", values: [9, 9, 8] }]} />API reference
RadarChart
Polygons on radial axes with toggleable legend.
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | string[] | – | Dimension names. |
| series | { key; label; color; values }[] | – | One value per axis. |
| max / rings / size | number | auto / 4 / 300 | Scale top, grid rings and size. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Reach legend toggles |
| EnterorSpace | Show or hide a series |
Accessibility
- The SVG is labelled with what it compares; hovering an axis prints every series' value as text.
- Legend items are toggle buttons.
Motion
- Shapes grow from the center and morph when values change; hidden series shrink away.
Responsive behavior
- Scales down to its container.
Performance
- One polygon per series.
Notes for AI
- Use the same max for all series so shapes are comparable.
This page as Markdown, for assistants and coding agents:
/components/radar-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt