# Radar chart

> Compare series across dimensions; shapes morph and legend toggles series.

Component · Pro · https://lodeui.com/components/radar-chart

## 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

```bash
npx shadcn@latest add @lode/radar-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 |
| Enter / Space | 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.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Scatter chart](https://lodeui.com/components/scatter-chart) — Points or bubbles on two measures with groups, hover card and keyboard-focusable dots.
- [Gauge](https://lodeui.com/components/gauge) — Half-circle gauge with warning and danger thresholds.