FunnelChart

Chart
Stage-by-stage conversion bars: one centered row per stage, labelled on the left and valued on the right.
src/charts/funnel-chart
View in Charts

Playground

Every control sets a real prop of FunnelChartProps. The JSX below updates as you go.
Props
share
boolean
compact
boolean
JSX · FunnelChartProps
<FunnelChart />

Variants

2 examples from src/charts/funnel-chart/funnel-chart.md, each rendered live from its own JSX.
Share of the first stage
<FunnelChart
share
stages={[
{ label: "Cart", value: 8600 },
{ label: "Address", value: 5200 },
{ label: "Payment", value: 3900 },
{ label: "Placed", value: 3400 },
]}
/>
Compact, inspected
<FunnelChart
compact
defaultSelected={1}
stages={[
{ label: "Leads", value: 900 },
{ label: "Qualified", value: 340 },
{ label: "Closed", value: 120 },
]}
/>

Anatomy

1
Chart frame
2
Stage bar
3
Stage label
4
Value
Dimmed parts appear only in some states or variants.

Props

12 props on FunnelChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
stages *
StackedSegment[]
–
Ordered stages, widest first.
title
string
–
Optional heading shown above the funnel.
share
boolean
false
Show each stage as a share of the FIRST stage instead of the conversion from the previous stage.
tapered
boolean
false
Draw connected stage trapezoids and show counts alongside stage conversion.
Density
8 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
formatValue
(v: number) => string
–
Formats stage values (data formatting, not styling).
selected
number | null
–
Press-to-inspect: the selected stage index (controlled). Pass null for none.
defaultSelected
number
–
Press-to-inspect: the initially selected stage (uncontrolled).
onSelect
(index: number | null) => void
–
Fired when a press selects a stage (or clears it with null).
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
image
img
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

<FunnelChart
stages={[
{ label: "Visits", value: 12400 },
{ label: "Signups", value: 4200 },
{ label: "Activated", value: 1850 },
{ label: "Paid", value: 480 },
]}
/>
The stages stack as a column of rows, each a ramp-colored bar centered in its track at the stage's share of the first stage's value, so the column tapers as the funnel drops off. The stage's label sits at the start of the row and its value, in the mono face, at the end; share shows every stage's percent of the first stage in the value slot instead. Each stage's accessible name carries its percent of the previous stage (of the first stage with share). Press a stage to select it (the others dim).

Tokens

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

Related components