## Radar Chart (S—295)

Compare two profiles on a radar: switch which one leads, hover an axis for both values, and see where each one wins.

- URL: https://sundaeui.dev/components/radar-chart
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/radar-chart.json`
- Tags: skills, chart, spider, profile, radar, comparison

Axes radiate from the centre with concentric rings at quarter steps. One series is a filled shape, the other a dashed outline, so they read apart without colour.
Hovering or focusing an axis label shows both values; the legend lists how many axes each side wins.

### Usage

```tsx
import { RadarChart } from '@/components/sundae/radar-chart'

<RadarChart />
```

### Props

- `axes` (`string[]`, required): Axis names.
- `series` (`{ name: string; values: number[] }[]`, required): Two series, values 0–100.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product comparisons, skill or attribute profiles.

### When not to use

- More than two series or precise reading: use grouped bars.

### Accessibility

- Axis labels are buttons; the active axis values are announced.
- A table fallback lists all values for screen readers.
- Reduced motion removes the movement and keeps every state change.