Ripl

Appearance

Funnel Chart ​

The Funnel Chart displays data as progressively narrowing horizontal bars, ideal for visualizing conversion pipelines, sales funnels, and drop-off rates. Each stage is labeled and colored automatically, with configurable gaps and rounded corners. Values animate smoothly when data changes.

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',
});

Options ​

  • data — The data array (ordered from widest to narrowest)
  • key — Unique key accessor
  • value — Value accessor (determines bar width)
  • label — Label accessor (displayed inside bars)
  • color — Optional color accessor
  • gap — Gap between segments in pixels (default 4)
  • borderRadius — Segment corner radius (default 4)