Funnel chart

Use a funnel chart for stages that lose part of the quantity at each step, such as a signup flow.

Four in ten visitors sign up and one in twenty subscribes

Users at each stage, from the first visit to a paid subscription

This chart cannot be displayed here: it needs JavaScript and WebGL.

each band is as wide as its stage's value; shares are computed from the values

The same chart in each style

Source

Open in playground

Rich Markdown

```chart
type: funnel
title: Four in ten visitors sign up and one in twenty subscribes
subtitle: Users at each stage, from the first visit to a paid subscription
data:
  inline:
    - stage: Visited
      users: 12000
    - stage: Signed up
      users: 4800
    - stage: Activated
      users: 2900
    - stage: Subscribed
      users: 640
encoding: {x: stage, y: users}
axes:
  y: {label: Users}
```

Fields that matter

type: funnel with encoding.x for the stage name and encoding.y for its value
Stages run from top to bottom in source order
There is no value axis; names stand at the left and values at the right of each band
A negative value, or text that is not a number, fails the chart instead of being drawn
encoding.facet makes one funnel per value; style.ratio sets the width to height ratio and style.facet_scale: free gives each facet its own width scale

Interactions

Hover or focus a stage to read its value and its share; the pointer picks the band it is inside.
Open the Table view, Download PNG or CSV, or Expand the chart.