Ripl

Appearance

Funnel Chart ​

The Funnel Chart draws an ordered set of stages as progressively narrowing bars, so the drop-off between one stage and the next is the width you lose. It fits conversion pipelines, sales stages and any sequence where every item at step N came from step N−1. key, value and label bind the stages, colorBy groups their colors, and gap, borderRadius and format set the finish. Stages are labeled and colored automatically, and widths animate when the data changes. Canvas, SVG and terminal contexts all draw it from the same options.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createFunnelChart,
} from '@ripl/charts';

const chart = createFunnelChart('#container', {
    data: [/* ... */],
    key: 'stage',
    value: 'value',
    label: 'stage',
});

Data Format ​

Each item is one stage of the funnel, with a key, a numeric value and a display label. Stages render top to bottom in array order, so sort the data the way you want it read:

ts
const data = [
    {
        stage: 'visited',
        label: 'Visited',
        count: 12_480,
    },
    {
        stage: 'signed-up',
        label: 'Signed up',
        count: 4_210,
    },
    {
        stage: 'purchased',
        label: 'Purchased',
        count: 1_150,
    },
];

Options ​

A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.

ts
createFunnelChart('#container', {
    data,
    key: 'stage',
    value: 'value',
    label: 'stage',
    colorBy: 'stage',
    gap: 4,
    borderRadius: 6,
    legend: { position: 'bottom' },
    format: 'number',
});

Events ​

Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.

ts
// Emitted when a segment is clicked.
chart.on('segmentclick', event => console.log(event.data)); // event.data: FunnelChartSegmentEvent
// Emitted when the pointer enters a segment.
chart.on('segmententer', event => console.log(event.data)); // event.data: FunnelChartSegmentEvent
// Emitted when the pointer leaves a segment.
chart.on('segmentleave', event => console.log(event.data)); // event.data: FunnelChartSegmentEvent