Funnel Chart

Description

A funnel chart visualizes a process that begins with a large initial quantity and narrows through a series of stages, with each stage retaining only a portion of the previous stage’s count. The chart takes its name from its characteristic shape: wide at the top (representing all initial entries) and narrow at the bottom (representing the final conversions or completions). Each horizontal band represents a stage, and its width is proportional to the count at that stage.

The most common application is conversion funnel analysis in marketing and product design: tracking how many users progress from awareness to consideration to purchase. But the pattern applies broadly to any process with progressive attrition: recruitment pipelines (applicants to hires), healthcare (screened to diagnosed to treated), legal proceedings (filings to trials to verdicts), or manufacturing (raw inputs to finished products to shipped units).

Funnel charts work best when there is a natural ordering of stages and the primary story is about drop-off rates between stages. The visual narrowing immediately communicates attrition, and comparing the width of adjacent bands reveals which transitions lose the most participants. When annotated with percentages, the chart becomes a powerful diagnostic tool for identifying bottlenecks.

When to Use

• Tracking conversion rates through a sequential multi-stage process
• Identifying which stage has the largest drop-off (bottleneck analysis)
• Reporting on marketing or sales pipelines where progressive attrition is the key metric
• Showing the relationship between total entries and final outcomes in a process

When NOT to Use

• When the stages are not sequential or do not have a natural order — use a bar chart
• When values increase at some stages (the “funnel” shape breaks) — use a waterfall chart or bar chart
• When you need to show branching paths (users going to different destinations) — use a Sankey diagram
• When precise comparisons between non-adjacent stages matter — use a bar chart with percentage labels
• When there are more than 7-8 stages — the funnel becomes too narrow; consider grouping stages

Anatomy

• Stage bands: Horizontal (or trapezoidal) bands, one per stage, with width proportional to the count at that stage
• Stage labels: Names of each process stage, typically to the left or inside the band
• Value labels: Counts or percentages displayed on or beside each band
• Conversion rate annotations: Optional labels showing the percentage that progressed from the previous stage
• Color gradient: Often a single hue with decreasing opacity or a sequential color scale from top to bottom
• Centering: Bands are typically centered horizontally to create the symmetric funnel shape

Variations

• Asymmetric funnel: Bands are left-aligned (like a bar chart) rather than centered, making value comparison easier at the cost of the funnel metaphor
• Funnel with conversion labels: Drop-off percentages between each stage are displayed alongside the bands
• Stacked funnel: Each stage is decomposed into sub-categories (e.g., by traffic source)
• Inverted funnel (pyramid): Widens from top to bottom, used when values grow through stages (e.g., audience reach)
• Horizontal funnel: Stages flow left-to-right, useful when there are many stages

Code Reference

// Observable Plot - horizontal funnel as centered bar chart
Plot.plot({
  marks: [
    Plot.barX(stages, {
      y: "stage",
      x: "value",
      fill: "steelblue",
      fillOpacity: (d, i) => 1 - i * 0.15,
      tip: true
    }),
    Plot.text(stages, {
      y: "stage", x: "value",
      text: d => `${d.value} (${d.rate}%)`,
      dx: 5, textAnchor: "start"
    })
  ],
  y: {domain: stages.map(d => d.stage)}
})