StackedBar

Chart
One proportional horizontal bar split into colored segments (the chart-1..chart-8 tokens in fixed order), with a legend carrying each segment's label and share.
src/charts/stacked-bar
View in Charts

Playground

Every control sets a real prop of StackedBarProps. The JSX below updates as you go.
Direct 48%
Organic search 32%
Social 20%
Props
track
boolean
tall
boolean
subtle
boolean
hideLegend
boolean
label
string
JSX · StackedBarProps
<StackedBar label="Installs by platform" />

Variants

2 examples from src/charts/stacked-bar/stacked-bar.md, each rendered live from its own JSX.
Sent 0%
Queued 0%
Track
track paints the unfilled remainder as a muted rail. A full bar looks the same; a bar whose segments sum to zero draws the rail instead of nothing, so a composition of nothing still reads as a bar. Use it wherever the strip has to hold its space, such as inside a Stats tile.
<StackedBar
track
label="Courier queue"
segments={[
{ label: "Sent", value: 0 },
{ label: "Queued", value: 0 }
]}
/>
Verified 81%
Unverified 19%
Strip size and wash
tall uses a 24 px strip, or 14 px separated bands when a capacity is supplied. subtle washes the segments for a bar that supports a headline rather than being one, where a solid bar would outweigh everything around it.
<StackedBar
tall
subtle
label="Verified identities"
segments={[
{ label: "Verified", value: 1502 },
{ label: "Unverified", value: 345 }
]}
/>

Anatomy

Direct 48%
Organic search 32%
Social 20%
1
Strip
2
Segment
3
Total
4
Legend
Dimmed parts appear only in some states or variants.

Props

11 props on StackedBarProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
11 props
segments *
StackedSegment[]
–
label
string
–
What the bar measures (e.g. "Traffic sources"); leads the accessible name.
hideLegend
boolean
false
Hide the legend (the labelled dots below the bar).
detailed
boolean
false
A two-column legend with separate right-aligned share readouts.
legendSegments
StackedSegment[]
–
The series to identify in a shared comparison legend. Defaults to this strip.
track
boolean
false
Paint the unfilled remainder as a muted rail, so a bar whose segments sum to zero still reads as a bar rather than as blank space. A composition of nothing (an empty queue, a metric at zero) is a real state to draw, and without the rail it draws as an absence.
tall
boolean
false
A 24 px strip instead of the default 8 px pill; capacity strips use 14 px bands.
subtle
boolean
false
Draw the segments as washes of their ramp colours rather than at full strength. For a bar that supports a headline rather than being one (the strip under a metric's value), where a solid bar outweighs everything around it.
max
number
–
The capacity the segments are shares of (100 GB of storage): each segment is its value over max, and the room left is drawn as one remainder segment on the raised surface fill, left out of the legend. Omit to split the strip by the segments' own total. A max under the segments' total is ignored.
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.
Media
38%
Docs
22%
Code
14%
Other
8%
Web
control 10 · field 10 · card 16 · Instrument Sans
Media
38%
Docs
22%
Code
14%
Other
8%
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Media
38%
Docs
22%
Code
14%
Other
8%
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<StackedBar
segments={[
{ label: "Direct", value: 42 },
{ label: "Organic search", value: 28 },
{ label: "Social", value: 18 }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--c3
--c4
--fd
--fm
--ft
--tx2
--tx3

Related components