Radar chart
A React component in Beamline's Charts & data-vis category.
A few series compared across the same five to eight dimensions as polygons on a polygon or circle grid; hover or arrow keys pick a dimension and read every series' value there.
Use it for
- Profiles across five to eight dimensions (product scorecards, skill profiles).
Not for
- Precise comparisons or many series (bar-chart).
- Dimensions with different units (normalise first, or use a table).
Anatomy
- title
- legend (toggle buttons)
- grid (rings and spokes)
- axis labels
- series polygons with points
- readout for the active dimension
- table button
Variants
- 0: grid: polygon · circle
- 1: fill: gradient · solid · none
- 2: dots
States
- loading (skeleton)
- empty
- missing value (the outline breaks into a dashed bridge; readout and table say Not measured)
- series hidden from the legend
- active dimension
- table view
Keyboard
- Tab focuses the plot; ←/→ move the active dimension, Escape clears
- Legend buttons toggle series (aria-pressed)
- The table button switches to a table of every value
Motion
Polygons grow from the centre once (500 ms); the active spoke and points brighten. Nothing moves under reduced motion.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data / axis | T[] / keyof T | — | Rows (one per dimension) and the column naming the dimension. |
series | ChartSeries[] | — | |
title / hideTitle / description | string / boolean / ReactNode | — | The figure's name is always its accessible name. |
format | (v: number) => string | — | |
table | boolean | — | Offer the table view (default on). |
loading | boolean | — | |
actions | ReactNode | — | |
className | string | — | |
grid | "polygon" | "circle" | — | |
fill | "gradient" | "solid" | "none" | — | |
dots | boolean | — | |
max | number | — | The outer ring's value (default: the largest value). |
size | number | — | |
legend | boolean | — | |
classNames | ChartClassNames | — | Frame, tooltip and slice-list parts as applicable to this chart. |
style / ref | CSSProperties / Ref<HTMLElement> | — | The native chart figure; layout measurement refs stay internal. |
Dependencies
motion
Import
import { RadarChart } from "@/components/radar-chart/radar-chart";Get it
Radar chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Charts & data-vis
- Activity heatmap: A calendar of daily counts, one cell per day on a sequential ramp: weeks across, weekdays down, month and weekday labels, a legend scale, hatched days…
- Area chart: Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing…
- Bar chart: Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a…
- Composed chart: Different measures on one time axis: bars, lines and areas per series, a left and a right value axis with their own formats, and reference lines.
- Gauge: One value against a known range: a semicircle, a 270° dial or a full ring, filled or with a needle, coloured bands with their names (healthy, busy…
- Line chart: Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a…
- Pie chart: A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering…
- Radial chart: Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target…
- Ridgeline: Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row…
- Sankey chart: Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and…
- Slope chart: Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼)…
- Sparkline: A compact trend beside its value: point along it or focus it and use ← → to read each point; nulls are gaps. TrendLine is the bare line.
- Streamgraph: Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a…
- Treemap: Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus…
- Waffle chart: Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose…