Funnel

Funnel charts display progressively decreasing values across stages, ideal for visualising conversion processes and multi-stage workflows.

When to use

Conversion funnels - Track user journey from awareness to conversion
Process stages - Show drop-off at each step
Progressive reduction - Display sequential filtering or narrowing

Basic example

const config: GraphConfig = {
  type: 'funnel',
  data: {
    columns: [
      { key: 'stage', label: 'Stage' },
      { key: 'users', label: 'Users' },
    ],
    rows: [
      { stage: 'Website visits', users: 10000 },
      { stage: 'Product views', users: 5000 },
      { stage: 'Add to cart', users: 2000 },
      { stage: 'Checkout', users: 800 },
      { stage: 'Purchase', users: 500 },
    ],
  },
};

Conversion rate

Show the conversion rate between the first and last stages as a headline number:

const config: GraphConfig = {
  type: 'funnel',
  headlineNumbers: {
    show: 'conversion',
  },
  data: {
    /* ... */
  },
};

The 'conversion' headline number type is specifically designed for funnel charts. It calculates the ratio between the first and last values.

Stage data

The funnel automatically calculates drop-off between stages. Your data should include:

First column: Stage names (categorical)
Second column: Values (numeric), ordered from highest to lowest

Headline numbers - Show conversion rate
Data labels - Display stage values

Donut Heatmap

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

When to use

Basic example

Conversion rate

Stage data

​When to use

​Basic example

​Conversion rate

​Stage data

​Related

When to use

Basic example

Conversion rate

Stage data

Related