RadarChart

A polygonal multi-axis comparison: concentric rings at nice tick fractions, a spoke per axis, and one closed polygon per series (ramp stroke over a soft matching wash), with the spoke labels just beyond the outer ring. Values align to axes by index and the accessible name folds every axis and value; press-to-inspect is deferred scope for this chart.
Candidate comparison
Casey
Jordan
iOS
Candidate comparison
Casey
Jordan
Android
Candidate comparison
Casey
Jordan
Web
tsx
<RadarChart
title="Candidate comparison"
axes={["Coding", "Design", "Comms", "Ops", "Product"]}
series={[
{ label: "Casey", values: [8, 6, 9, 5, 7] },
{ label: "Jordan", values: [6, 9, 7, 8, 5] },
]}
/>

Props

Prop
Description
axes
required
string[]
Spoke labels, clockwise from 12 o'clock.
series
required
ChartSeries[]
One polygon per series; values aligned to `axes` by index.
title
string
Optional heading shown above the plot.
max
number
Outer-ring maximum. Defaults to a nice bound above the data max.
success
boolean
Tone (single-series only; pick one; default primary). Precedence: success > destructive.
destructive
boolean
Tone (single-series only; pick one; default primary). Precedence: success > destructive.
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Hide the series legend (multi-series charts show one by default).
hideGrid
boolean
Hide the rings and spokes (the labels always render).
formatValue
(v: number) => string
Formats accessible values (data formatting, not styling).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

RadarChart

Don’t
Radar axes are unordered categories; a time series belongs on a LineChart, where the x axis carries the order.
Do
Candidate comparison
Casey
Jordan
Compare a small number of profiles over the same axes, on one shared scale.
← ProgressRing
RadialBarChart →