Home/ Cookbook/ Charts/ Radar

Radar / spider chart

Five-to-seven spokes radiating from a centre, each measuring one axis. The chart that turns a multi-dimensional profile — student, team, vendor — into a single polygon you can compare to a benchmark.

Charts · 16 of 20 1 primitive · Chart.Radar ~12 min React · @corelithzw/react

Overview

A polygon plotted on radial axes — each spoke is one normalised metric, each polygon is one entity. The shape itself is the comparison.

Radar charts work because the human eye is good at "matches the outline" judgement. Overlay an entity polygon on a benchmark polygon and the dents (under-performing dimensions) jump out instantly. Common uses: student profile across subjects, vendor capability across criteria, team competency across roles. Every spoke must be the same scale (typically 0–100 or 0–5) — mixing units across spokes makes the shape meaningless.

Reach for it when you have 5–7 commensurable axes and want shape comparison, not magnitude. Skip it for fewer than 4 axes (a bar chart wins), more than 8 (the polygon gets noisy), or when the axes aren't on the same scale (use small-multiples bars).

The opinion: radars are terrible for two unrelated entities and great for one entity against a known benchmark. Never plot more than three polygons on the same radar — past two, the overlap is visual soup.

The chart

Student profile vs. cohort average. Six axes, two polygons — the student leads in maths and science, lags in writing.

Tendai Cohort avg.

Required pieces

PrimitiveChart.Radar

Roadmap: Chart.Radar with auto-normalised axes and built-in comparison ships in v0.2. v0.1-alpha users compose with the inline SVG above; the axis math is the same.

React snippet

Define axes with names + max values; pass an array of series, each a polygon.

Chart.Radar@corelithzw/react

Customising

Single polygon, no benchmark

For self-assessment displays — "how are we doing across these axes?" — drop the benchmark and just show one shape.

<Chart.Radar
  axes={axes}
  series={[{ name: 'You',
    values: [...] }]}
  showGridLevels
/>

Filled vs. outline

Use filled polygons for one series, outline-only for two or three to keep them visually distinguishable.

<Chart.Radar
  axes={axes}
  series={[
    { name: 'A', fill: true },
    { name: 'B', fill: false }
  ]}
/>

Square axis (no axis lines)

Clean variant — just the polygon and axis labels, no gridlines. Reads more like an infographic.

<Chart.Radar
  axes={axes}
  series={series}
  grid="none"
  axisLines={false}
/>

In context

A stat hero with a "Student of the term" header, then a row card with the radar and a numeric breakdown side-by-side.

Term profile · Tendai Moyo

79.7 +5.2 vs. cohort

Maths92

Science88

Art84

Geography78

History72

English64