Funnel Chart Card

A horizontal flow funnel in the dashboard card shell. Every stage is a column sized to its share of the top of the funnel that tapers into the next, with a centred percentage pill and a value/name footer; hovering a stage lifts it out by dimming the rest and swaps the headline. Recharts' funnel is a vertical trapezoid stack, so this one is hand-drawn from the same tokens. For the list version see the Stage Bars Card.

Sign-up funnel

Provided data

+5.2%

Link opened197Started110Completed77Converted38

Sign-up funnel: illustrative source-shaped fixture data
Category	Value
Link opened	197
Started	110
Completed	77
Converted	38

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card"/>;}

Shapes and mono

Choose shape="sharp" for straight trapezoid stages instead of the curved taper. Use mono for one theme-aware color across the funnel. The two options can be combined.

Hiring

Provided data

Applied1,240Screened420Phone95Offer18Hired11

Hiring: illustrative source-shaped fixture data
Category	Value
Applied	1,240
Screened	420
Phone	95
Offer	18
Hired	11

Checkout

Provided data

-1.8%

Viewed41,800Basket18,400Checkout9,400Payment6,200Paid5,200

Checkout: illustrative source-shaped fixture data
Category	Value
Viewed	41,800
Basket	18,400
Checkout	9,400
Payment	6,200
Paid	5,200

Hiring

Provided data

Applied1,240Screened420Phone95Offer18Hired11

Hiring: illustrative source-shaped fixture data
Category	Value
Applied	1,240
Screened	420
Phone	95
Offer	18
Hired	11

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card" example="shapes"/>;}

Data

Pass stages in funnel order, with a label, value and optional color for each. Adding a stage adds a column; neck sizes, proportions and footer values are recalculated. Colors use the chart palette unless overridden. Each supplied range can include its own data, delta and headline. Listen to onRangeChange to fetch your own values. The default preview uses three local period snapshots.

Checkout funnel

Provided data

-1.8%

Viewed41,800Basket18,400Checkout9,400Payment6,200Paid5,200

Checkout funnel: illustrative source-shaped fixture data
Category	Value
Viewed	41,800
Basket	18,400
Checkout	9,400
Payment	6,200
Paid	5,200

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card" stages={[{label:'Visited',value:100},{label:'Signed up',value:60},{label:'Activated',value:32}]}/>;}

Advanced playground, API and recovery states ↗

Funnel Chart Card

Sign-up funnel

Provided data

+5.2%

Link opened197Started110Completed77Converted38

Sign-up funnel: illustrative source-shaped fixture data
Category	Value
Link opened	197
Started	110
Completed	77
Converted	38

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card"/>;}

Shapes and mono

Choose shape="sharp" for straight trapezoid stages instead of the curved taper. Use mono for one theme-aware color across the funnel. The two options can be combined.

Hiring

Provided data

Applied1,240Screened420Phone95Offer18Hired11

Hiring: illustrative source-shaped fixture data
Category	Value
Applied	1,240
Screened	420
Phone	95
Offer	18
Hired	11

Checkout

Provided data

-1.8%

Viewed41,800Basket18,400Checkout9,400Payment6,200Paid5,200

Checkout: illustrative source-shaped fixture data
Category	Value
Viewed	41,800
Basket	18,400
Checkout	9,400
Payment	6,200
Paid	5,200

Hiring

Provided data

Applied1,240Screened420Phone95Offer18Hired11

Hiring: illustrative source-shaped fixture data
Category	Value
Applied	1,240
Screened	420
Phone	95
Offer	18
Hired	11

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card" example="shapes"/>;}

Data

Checkout funnel

Provided data

-1.8%

Viewed41,800Basket18,400Checkout9,400Payment6,200Paid5,200

Checkout funnel: illustrative source-shaped fixture data
Category	Value
Viewed	41,800
Basket	18,400
Checkout	9,400
Payment	6,200
Paid	5,200

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="funnel-chart-card" stages={[{label:'Visited',value:100},{label:'Signed up',value:60},{label:'Activated',value:32}]}/>;}

Advanced playground, API and recovery states ↗

Funnel Chart Card

Sign-up funnel

Installation

Shapes and mono

Hiring

Checkout

Hiring

Data

Checkout funnel

Search Helios UI

Funnel Chart Card

Sign-up funnel

Installation

Shapes and mono

Hiring

Checkout

Hiring

Data

Checkout funnel

Search Helios UI