Docs › Chart types

Funnel chart

Stages with their counts and the conversion between them.

type: 'funnel' draws the values of the first series as stages. Bar width is the value against the largest stage; between stages sits the conversion from the previous one (↓ 44.7%), and on the right the value and its share of the first stage.

Live example

Code for this example

createChart('#chart', {
  type: 'funnel',
  title: 'Purchase funnel',
  data: {
    labels: ['Visit', 'View product', 'Add to cart', 'Checkout', 'Purchase'],
    series: [{ name: 'Users', data: [48210, 21530, 8240, 4910, 3120] }],
  },
});

Tooltip: the stage value, Conversion (from the previous stage) and Of first stage.
Keyboard: up and down move between stages.
Stages keep the order you pass them in; a stage that grows is drawn as is (conversion above 100%).