Radar Chart
Multi-axis spider chart drawing its polygon. Install with npx remotion-ui@latest add radar-chart.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add radar-chartA spider chart whose polygon reaches out one axis at a time.
import { RadarChart } from "@/remotion/primitives/radar-chart";
<RadarChart
axes={["Speed", "Polish", "Reuse", "Docs", "Types", "Motion"]}
series={[
{ label: "Before", values: [42, 38, 24, 30, 46, 34] },
{ label: "After", values: [88, 92, 84, 78, 90, 86] },
]}
maxValue={100}
/>Axis by axis, not scale-up
Vertices are staggered clockwise rather than the whole polygon scaling from the centre. A polygon that simply grows says nothing about which axis is strong; reaching axis by axis assembles the shape in the order the labels are read, and the silhouette only resolves when the last vertex lands.
Several series stagger against each other by seriesOffsetInFrames, so a
comparison arrives as two statements rather than one tangle.
The web arrives whole
Rings and spokes fade in together, ahead of the data. They are the measuring instrument, not part of the reading — animating them would suggest the scale itself was changing.
Sizing
The SVG box is the web plus a margin computed from the longest axis label, so
long names are not clipped and short ones do not waste space. maxValue pins
the outer ring; leave it unset and the largest value present defines it, which
is rarely what you want when two charts sit side by side.
Vertices reach out one axis at a time rather than the polygon scaling as a whole: a growing polygon says nothing about which axis is strong. The web arrives whole and ahead of the data — it is the instrument, and animating it would suggest the scale was changing. The box grows with the longest axis label so nothing clips.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/radar-chart- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: axes, series, size, maxValue, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { RadarChart } from "@/remotion/primitives/radar-chart";
<RadarChart
axes={["Speed", "Polish", "Reuse", "Docs", "Types", "Motion"]}
series={[
{ label: "Before", values: [42, 38, 24, 30, 46, 34] },
{ label: "After", values: [88, 92, 84, 78, 90, 86] },
]}
maxValue={100}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | string[] | required | Axis names, clockwise from the top. Three minimum. |
| series | RadarSeries[] | required | `{ label, values, color? }`, one value per axis in axis order. |
| size | number | 420 | Diameter of the web. Labels sit outside it. |
| maxValue | number | largest value | Value at the outer ring. Pin it when comparing two charts. |
| ringCount | number | 4 | Concentric rings behind the polygons. |
| showLabels | boolean | true | Axis names around the web. |
| showVertices | boolean | true | Dot on each vertex. |
| fillOpacity | number | 0.22 | Fill under each polygon. |
| durationInFrames | number | 18 | Length of one vertex's reach. |
| staggerInFrames | number | 5 | Frames between axes, sweeping clockwise. |
| seriesOffsetInFrames | number | 10 | Frames one series trails the previous one by. |
| exitAtInFrames | number | undefined | Frame the polygons collapse to the centre on. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |