Lattice

Components Chart

funnel

Evidence Canvas Series

Tapering stages that show where a flow drops off, with the conversion rate between each.

Open in Playground

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.

percentagesequencepitch

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 progress or stats.
  • Three to seven stages. Two stages is just a ratio (use big-number or stats); 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 piechart for parts of a whole or progress for 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-tile stats instead.
  • 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 progress or a chart with an axis.

Authoring

<!-- _class: funnel -->

## Where the flow drops off.

- First stage `1000`
- Second stage `600`
- Third stage `320`
- Fourth stage `140`

Slots

SlotSelectorRequiredDescription
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  │
└─────────────────────────────────────────┘