<!-- Protocore Design System — RadarChart -->
# RadarChart

- **Category:** Charts (`charts`)
- **Slug:** `charts/radar-chart`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { RadarChart } from "@protocore/pds/charts";`
- **Docs:** https://pds.protocore.io/components/charts/radar-chart

> A monochrome-plus-signal radar chart with a hairline polar grid and a faint fill wash, recharts-backed.

## Import path

`RadarChart` ships from the **`@protocore/pds/charts`** subpath. `recharts` (>=3) is an **optional peer**.

```tsx
import { RadarChart } from "@protocore/pds/charts";
import { ChartContainer } from "@protocore/pds";
```

## When to use it

Use **RadarChart** to compare a few entities across the *same set of dimensions* — a service scored on latency, uptime, cost, coverage. It reads best with three to eight spokes and one or two overlaid series; beyond that the shapes tangle. For ranked comparison of a single metric across categories use [BarChart](/charts/bar-chart).

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `data` | `ReadonlyArray<Record<string, string \| number \| null \| undefined>>` | yes | — | Row-oriented data; each datum keyed by `angleKey` and by every series `key`. |
| `series` | `ChartSeries[]` | yes | — | Series to plot, in draw + legend order. `ChartSeries` = `{ key: string; label?: string; color?: string }`. |
| `angleKey` | `string` | yes | — | Datum key for the polar-angle category (the spoke labels). |
| `height` | `number` | no | `240` | Chart height in px. |
| `...rest` | `Omit<RechartsRadarChartProps, 'data' \| 'children' \| 'width' \| 'height' \| 'ref'>` | no | — | Remaining props spread onto the underlying recharts `<RadarChart>`. |

## Examples

### Basics

Give it `data`, an `angleKey` for the spokes, and one or more `series`. Each series draws a 1.5px ramp-coloured outline with a faint fill wash, over a hairline polar grid.

```tsx
import { ChartContainer } from "@protocore/pds";
import { ChartLegend, RadarChart } from "@protocore/pds/charts";

const data = [
  { axis: "Latency", eu: 82, us: 70 },
  { axis: "Uptime", eu: 95, us: 88 },
  { axis: "Cost", eu: 60, us: 74 },
  { axis: "Coverage", eu: 78, us: 66 },
  { axis: "Throughput", eu: 71, us: 80 },
];

const series = [
  { key: "eu", label: "eu-central-1" },
  { key: "us", label: "us-east-1" },
];

export default function Demo() {
  return (
    <ChartContainer
      label="Region scorecard"
      legend={<ChartLegend items={series.map((s) => ({ label: s.label }))} />}
      height={280}
    >
      <RadarChart data={data} angleKey="axis" series={series} />
    </ChartContainer>
  );
}
```

## Do & don't

**Do**

- Keep spokes between three and eight so the shape stays readable.
- Overlay at most two or three series and give each a `label`.
- Wrap it in a ChartContainer so it inherits the `--pds-chart-*` ramp.
- Use the same measurement scale across spokes, or normalise first.

**Don't**

- Don't overlay many series — filled shapes occlude each other.
- Don't mix wildly different scales on the spokes without normalising.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
- Don't use it for a single metric over time — that's a LineChart.

## Accessibility

**Notes**

- recharts renders the plot as SVG; provide surrounding context for assistive tech.
- Pair overlaid series with a legend — shape identity relies on outline and label, not hue alone.

## Related

`chart-container`, `bar-chart`, `line-chart`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/