RadialBarChart

Chart
Concentric arc rings, one per category, outermost 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.
src/charts/radial-bar-chart
View in Charts

Playground

Every control sets a real prop of RadialBarChartProps. The JSX below updates as you go.
iOS 64
Android 48
Web 82
Props
compact
boolean
hideLegend
boolean
JSX · RadialBarChartProps
<RadialBarChart />

Variants

2 examples from src/charts/radial-bar-chart/radial-bar-chart.md, each rendered live from its own JSX.
Compact, no legend
<RadialBarChart
compact
hideLegend
data={[
{ label: "Q1", value: 92 },
{ label: "Q2", value: 71 }
]}
/>
Hot 420
Warm 260
Cold 890
Inspected
<RadialBarChart
defaultSelected={1}
data={[
{ label: "Hot", value: 420 },
{ label: "Warm", value: 260 },
{ label: "Cold", value: 890 }
]}
/>

Anatomy

iOS 64
Android 48
Web 82
1
Chart frame
2
Bar
3
Track
4
Legend
Dimmed parts appear only in some states or variants.

Props

12 props on RadialBarChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
data *
StackedSegment[]
–
One ring per entry, outer to inner.
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.
Density
9 props
compact
boolean
false
hideLegend
boolean
false
Hide the value legend (the accessible name still carries every value).
detailed
boolean
false
A compact disc with a separate value column and shared maximum caption.
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
ARIA on web
aria-label

Platform skins

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

Usage

<RadialBarChart
label="Platform activation"
max={100}
data={[
{ label: "iOS", value: 64 },
{ label: "Android", value: 48 },
{ label: "Web", value: 82 }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--c3
--c4
--fd
--ft
--ln
--sf
--sf3
--sh-sm
--tx2

Related components