/// Charts

RadarChart

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

import { RadarChart } from "@protocore/pds";

View as Markdown

Import path

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

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

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.

Region scorecard

eu-central-1us-east-1

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.

Usage

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

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.

`RadarChart` props

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