Components
FunnelChart
Funnel chart showing drop-off through ordered stages, from widest to narrowest.
FunnelChart visualises how a population narrows as it moves through ordered
stages — perfect for conversion flows like visitors to trials to paid. Pass
data as an array of { name, value } stages ordered widest to narrowest; each
band's width reflects its value relative to the top. It renders client-side via
ECharts, so give it a height (defaults to 280).
Example
Preview
import { FunnelChart } from '@officina/ui';
const data = [
{ name: 'Visitors', value: 48000 },
{ name: 'Trials', value: 12000 },
{ name: 'Activated', value: 7800 },
{ name: 'Paid', value: 2900 },
];
<FunnelChart data={data} height={280} />;API
| Prop | Type | Default | Description |
|---|---|---|---|
| data* | { name: string; value: number; }[] | — | Stages from widest to narrowest. |
| className | string | — | |
| height | number | 280 | Chart height in pixels. |