Funnel
React funnel chart — stage drop-off as a narrowing word-sized funnel. Tiny accessible SVG microchart; RSC-safe static or /interactive.
Funnel answers "where does the pipeline leak?". Stepped rectangles, zero-anchored — never the classic tapered silhouette, which interpolates data that doesn't exist. The drop between neighbors is the read.
Install
import { Funnel } from "@microcharts/react/funnel";// stages — real values under “Sample data” below<Funnel data={stages} title="Signup funnel" />Sample data
const stages = [ { label: "Visitors", value: 12400 }, { label: "Signups", value: 5704 }, { label: "Activated", value: 2730 }, { label: "Paid", value: 1116 },];Try it
When to use it
- Good for — per-campaign funnels in table cells, conversion bridges in cards.
- Avoid for — unordered categories (MiniBar) or more than 6 stages.
Sizing
Variants
Edge cases
Four homes
Why this default
rate always normalizes to stage 1, never to the previous stage — per-stage rates hide compounding loss. A stage larger
than its predecessor (re-engagement funnels) renders truthfully and the summary appends the inversion. The connectors
and zero-anchored columns keep the read a measurement, not a shape.
Accessibility
The accessible name is the conversion story — "4 stages, 12,400 to 1,116 — overall 9%.", plus "Stage 3 exceeds stage 2." when a pipeline inverts. The interactive entry roves stages ("Activated: 2,730 — 22% of Visitors.").
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label; value }[] | Ordered stages. |
| mode | "absolute" | "rate" | Rate = % of the FIRST stage (never the previous). |
| connectors | boolean | Retained-share slats between stages. |
| label | "none" | "percent" | "value" | Above each column (deterministic drop-out; default percent). |
| highlight | number | string | Accent the leak stage. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.
Related charts
MicroDonut
React micro donut chart — part-to-whole as a tiny ring — categories, not a gauge. Tiny accessible SVG microchart; RSC-safe static or /interactive.
LikertStrip
React likert strip chart — ordinal survey responses on a shared strip. Tiny accessible SVG microchart; RSC-safe static or /interactive.