RadarChart

Chart
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.
src/charts/radar-chart
View in Charts

Playground

Every control sets a real prop of RadarChartProps. The JSX below updates as you go.
Candidate comparison
Casey
Jordan
Props
Tone
pick one
hideLegend
boolean
hideGrid
boolean
compact
boolean
JSX · RadarChartProps
<RadarChart />

Variants

2 examples from src/charts/radar-chart/radar-chart.md, each rendered live from its own JSX.
Single series, toned
<RadarChart
success
axes={["Latency", "Uptime", "Errors", "Cost", "Coverage"]}
series={[{ label: "API", values: [7, 9, 8, 6, 7] }]}
/>
Compact, no grid
<RadarChart
compact
hideGrid
axes={["Spd", "Pwr", "Def", "Mag", "Luck", "HP"]}
series={[{ label: "Build A", values: [12, 18, 9, 15, 7, 14] }]}
/>

Anatomy

Candidate comparison
Casey
Jordan
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Grid
Dimmed parts appear only in some states or variants.

Props

14 props on RadarChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
axes *
string[]
–
Spoke labels, clockwise from 12 o'clock.
series *
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.
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Density
8 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
hideLegend
boolean
false
Hide the series legend (multi-series charts show one by default).
hideGrid
boolean
false
Hide the rings and spokes (the labels always render).
spokes
boolean
false
Join each outer vertex to the center with a radial guide.
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label
From the docs
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Current
Previous
Web
control 10 · field 10 · card 16 · Instrument Sans
Current
Previous
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Current
Previous
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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] },
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--fd
--fm
--ft
--ln
--ln2
--sf
--sh-sm
--tx2
--tx3

Related components