Funnel
Funnel draws each pipeline stage as a zero-anchored stepped rectangle, so the drop between stages is the read.
- encodes
- column height per stage, zero-anchored
- precision
- high (rects, no trapezoid interpolation)
- nodes
- 2/stage − 1 (≤ 6 stages)
Funnel prints one stepped rectangle per stage — 12,400 visitors, 5,704 signups, 2,730 activated, 1,116 paid — each anchored at zero, so the drop between neighbors is the read: the biggest one is where the pipeline leaks. It never draws the classic tapered silhouette, which interpolates data that doesn't exist.
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
Use it for per-campaign funnels in table cells and conversion bridges in cards. For unordered categories use MiniBar, and keep a funnel to 6 stages or fewer.
Sizing
Variants
mode="rate" always normalizes to stage 1, never to the previous stage: per-stage rates hide compounding loss.
Edge cases
A single stage renders as one full-height column with no connector slats, at an overall 100%. A stage larger than its predecessor renders at its true size, as re-engagement funnels do, and the summary appends the inversion.
Four homes
Accessibility
The accessible name states the span and the overall rate: "4 stages, 12,400 to 1,116 — overall 9%." It appends "Stage 3 exceeds stage 2." when a pipeline inverts. The interactive entry roves stages, announcing each as "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.