Charts
RadarChart
A profile across several named dimensions.
Usage
When to reach for it
Ships from@misoto22/design/charts
import { RadarChart } from '@misoto22/design/charts'Notes
A profile across several named dimensions — the shape for "what is this thing strong and weak at".
It reads a SHAPE, not a set of values: the area a radar encloses depends on the order the spokes happen to be in, so it is the wrong chart for comparing magnitudes and the right one for recognising a silhouette. Two or three series at most.
Anatomy
| Element | Description |
|---|---|
| Figure framerequired | ChartFigure’s <figure>, with the polar plot inside one ChartContainer. |
| Polygonsrequired | <RadarChart.Radar>. variant="filled" is the default and paints at 2.2 times --chart-fill, because a radar’s fill IS the mark rather than a wash under a line and has to hold its shape where two of them overlap. |
| Spoke labels | <RadarChart.PolarAngleAxis>, the names around the perimeter. They are the only thing that says what a corner of the silhouette measures. |
| Radial scale | <RadarChart.PolarRadiusAxis>, and it is opt-in. Leave it out and the rings carry no numbers at all: the reader has a shape and no idea what one ring is worth. |
| Grid | <RadarChart.PolarGrid>, polygonal rather than circular by default, so the rings line up with the polygon the data draws over them. |
| Legend | <RadarChart.Legend>. Two overlapping outlines two steps apart on the grey ramp name nothing, and there is no axis here to name them instead. |
Best practices
Do
- Fix the spoke ORDER and keep it fixed across every radar on the page. The area a polygon encloses is a function of the order the dimensions happen to sit in, so re-ordering the spokes changes the silhouette without changing one number.
- Put every dimension on a comparable scale first — a percentile, a score out of ten, an index. One radius serves all the spokes, so a spoke in milliseconds beside one in percent draws a spike that means nothing.
- Switch to variant="lines" past two series. Filled polygons overlap, and judging areas through two layers of translucency is precisely what this form is worst at.
Don’t
- Do not read magnitude off it. A radar is for recognising a silhouette — the same profile before and after — and which of two is bigger is a question a BarChart answers and this one only appears to.
- Do not skip <RadarChart.PolarRadiusAxis> and call the chart finished. It renders, the rings render, and nothing on screen says whether the outer ring is 100 or 1,000; the sr-only table still has the figures, the sighted reader does not.
Examples
default
One profile across six named dimensions: what a radar offers is a silhouette to recognise, not magnitudes to compare. Two consequences follow from the geometry and neither is a matter of taste — doubling every value quadruples the area the polygon encloses, so the fill overstates the difference it appears to show, and reordering the spokes redraws the same six numbers as a different shape, which makes the axis order a choice the chart cannot label. Dot variant border marks each vertex, which is where the values actually are; the edges between them are interpolation rather than data.
| skill | Current |
|---|---|
| Design | 86 |
| Research | 64 |
| Writing | 72 |
| Delivery | 91 |
| Review | 58 |
| Support | 77 |
variant and grid
A second series on the web, and the two props that decide whether the pair can be told apart. Filled polygons overlap, and judging areas through two layers of translucency is the one thing a radar is worst at — lines gives up the fill and keeps the outline, which is what carries the shape anyway. gridType circle swaps the polygon web for rings, so the grid reads as a scale instead of competing with the marks as a second shape. Clicking a series or its legend entry drops the other to a fifth of its opacity, which is the way back to one silhouette at a time.
| skill | Current | Target |
|---|---|---|
| Design | 86 | 95 |
| Research | 64 | 80 |
| Writing | 72 | 78 |
| Delivery | 91 | 88 |
| Review | 58 | 75 |
| Support | 77 | 70 |
loading
The skeleton. A radar has no straight axis for a travelling highlight to run along, so it animates by MORPHING between shapes — six spokes re-rolled every 1.5 seconds, with Recharts' own transition carrying the change; under prefers-reduced-motion the animation is off and the shape simply holds. The spoke values come from a deterministic function rather than Math.random, because a server-rendered skeleton that disagrees with the client's is a hydration mismatch. Leave the parts composed while isLoading is set: the grid is still drawn, the Radar itself renders nothing, and both come back as themselves when the data arrives.
Types
export type RadarVariant = 'filled' | 'lines'Accessibility
- title is required; the rows are also rendered as a visually hidden table.
- Two or three series at most: filled polygons overlap, and judging areas through two layers of translucency is what a radar is worst at. Past that, variant="lines".