BarList

Chart
Ranked label and value rows: each row is a proportional tone wash behind a truncating label, with a right-aligned mono value and an optional delta.
src/charts/bar-list
View in Charts

Playground

Every control sets a real prop of BarListProps. The JSX below updates as you go.
Top components
Props
share
boolean
Tone
pick one
compact
boolean
plain
boolean
title
string
JSX · BarListProps
<BarList title="Top components" />

Variants

3 examples from src/charts/bar-list/bar-list.md, each rendered live from its own JSX.
Share of total
<BarList
share
items={[
{ label: "google", value: 412 },
{ label: "email", value: 318 },
{ label: "github", value: 142 },
]}
/>
Drill-in rows
<BarList
onPressItem={() => {}}
items={[
{ label: "news.ycombinator.com", value: 4210 },
{ label: "reddit.com", value: 2380 },
{ label: "linkedin.com", value: 1240 },
]}
/>
Plain, inside a card
<Card>
<BarList
plain
items={[
{ label: "Deploys", value: 42 },
{ label: "Rollbacks", value: 3 },
{ label: "Incidents", value: 1 },
]}
/>
</Card>

Anatomy

Top components
1
Frame
2
Bar
3
Value
4
Label
Dimmed parts appear only in some states or variants.

Props

11 props on BarListProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
items *
BreakdownRow[]
–
The rows to render, in order.
title
string
–
Optional heading shown above the rows.
share
boolean
false
Bars proportional to the sum of all rows, with percent readouts, instead of relative to the largest row.
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Density
6 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
formatValue
(v: number) => string
–
Formats row values (data formatting, not styling).
onPressItem
(index: number) => void
–
Rows become tappable drill-in targets when set.
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
ARIA on web
aria-label

Platform skins

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

Usage

<BarList
title="Top pages"
items={[
{ label: "/pricing", value: 18400, delta: "+12%" },
{ label: "/docs", value: 12100, delta: "+4%" },
{ label: "/blog/launch", value: 8700, delta: "-2%", down: true },
]}
/>
Bars size against the largest row by default (the ranking idiom); share sizes them against the sum of the rows and appends percent readouts (the composition idiom). Rows become drill-in buttons with onPressItem. For comparing magnitudes on a shared axis without deltas or shares, reach for the bar Chart and its horizontal mode instead.

Tokens

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

Related components