Components Chart
funnel
Evidence Canvas Series
Tapering stages that show where a flow drops off, with the conversion rate between each.
Use for a pipeline that narrows — a sales / conversion funnel, a hiring or grant pipeline, an onboarding flow. Each stage's band width is proportional to its value; the stage-to-stage conversion % is printed in the gaps so the leak is the read.
When to use
- The story is the drop-off. A funnel earns its shape when each stage is a strict subset of the one above and the audience needs to see WHERE the flow narrows — the leaky step, not just the totals. If the stages aren't a shrinking pipeline, use
progressorstats. - Three to seven stages. Two stages is just a ratio (use
big-numberorstats); past seven the bands thin out and the conversion labels crowd. Most pipelines fit in four to six. - Values in flow order, widest first. Author the stages top-to-bottom as the flow runs, largest count first. The widest value sets full width and every band scales to it; the conversion % is computed from each value to the next.
When not to use
- Stages that aren't a subset. If a later stage can exceed an earlier one (it's a category breakdown, not a pipeline), the taper lies. Use
piechartfor parts of a whole orprogressfor independent metrics. - A funnel of two stages. Two bands is a single conversion rate dressed up as a chart. State it as a
big-number(‘18% convert’) or a two-tilestatsinstead. - Non-monotonic values. Values that rise and fall make the trapezoids bulge and the conversion %s read oddly. A funnel assumes a monotonic narrowing; for an up-and-down series use a
progressor a chart with an axis.
Slots
| Slot | Selector | Required | Description |
|---|---|---|---|
title | h2 | yes | Slide heading — name the flow and, ideally, the takeaway (‘Where the pipeline leaks’). |
stages | ul > li | yes | One li per stage, in flow order (widest first). Lead with the stage label, then a trailing inline-code value — Signups \4,800\``. Commas and units are tolerated; the largest value sets full width. Three to seven stages read best. |
Anatomy
┌─────────────────────────────────────────┐
│ header │
│ Where the pipeline leaks. │
│ │
│ Visitors [============] 12,000 │
│ 62% [========] 4,800 │
│ Activated [=====] 2,160 │
│ 40% [==] 864 │
│ Paid [=] 670 │
│ │
│ footer 1/19 │
└─────────────────────────────────────────┘