RadialBarChart

Concentric arc rings, one per category, innermost first: each pairs a muted full-circle track with a ramp-colored value arc revealed clockwise from 12 o'clock, and a column legend carries the formatted values. Every ring sweeps against the same max (the largest entry by default), so the chart compares attainment, not shares. Press a ring to select it (the others dim); press elsewhere to clear.
iOS
64
Android
48
Web
82
iOS
iOS
64
Android
48
Web
82
Android
iOS
64
Android
48
Web
82
Web
tsx
<RadialBarChart
label="Platform activation"
max={100}
data={[
{ label: "iOS", value: 64 },
{ label: "Android", value: 48 },
{ label: "Web", value: 82 }
]}
/>

Props

Prop
Description
data
required
StackedSegment[]
One ring per entry, inner to outer.
label
string
What the rings measure (e.g. "Platform activation"); leads the accessible name.
max
number
The value of a full sweep. Defaults to the largest entry.
compact
boolean
Density (omit for the default 160 disc; compact is 120).
hideLegend
boolean
Hide the value legend (the accessible name still carries every value).
formatValue
(v: number) => string
Formats legend values (data formatting, not styling).
selected
number | null
Press-to-inspect: the selected ring index (controlled). Pass null for none.
defaultSelected
number
Press-to-inspect: the initially selected ring (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press selects a ring (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only.

Do & Don’t

RadialBarChart

Don’t
Direct
60
Search
40
Rings encoding shares of a whole belong on PieChart; nested rings without a shared maximum cannot be compared by eye.
Do
iOS
64
Web
82
Compare attainment on rings that share one sweep maximum, with the values in the legend.
← RadarChart
RangeAreaChart →