StackedBar

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.
Direct
48%
Organic search
32%
Social
20%
iOS
Direct
48%
Organic search
32%
Social
20%
Android
Direct
48%
Organic search
32%
Social
20%
Web
tsx
<StackedBar
segments={[
{ label: "Direct", value: 42 },
{ label: "Organic search", value: 28 },
{ label: "Social", value: 18 }
]}
/>

Props

Prop
Description
segments
required
StackedSegment[]
—
label
string
What the bar measures (e.g. "Traffic sources"); leads the accessible name.
hideLegend
boolean
Hide the legend (the labelled dots below the bar).
track
boolean
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
The metric-strip size: a 24 band carrying the chart bar radius, instead of the default 10 pill. It is the height a Sparkline plots in, so a composition drawn at this size sits in the same band as a trend and a row holding both scans as one set.
subtle
boolean
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.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only.

Do & Don’t

Stacked bar

Don’t
Colored segments with no legend force the reader to guess which channel each band represents.
Do
Direct
42%
Organic search
28%
Social
18%
Referral
12%
Always ship a legend with a colored dot, label, and percentage per segment.
← Sparkline
Treemap →