@graphysdk/geom-funnel

Beta. This geom is on a 0.x version line: a minor release may change its aesthetics, style parts or look. Use a caret range (^0.1.0) to take only patches.

A funnel geom for the Graphy charting SDK. It shows how many of a starting count reach each stage of a process: one bar per stage, centred on a common line and as long as the stage's count, with a band joining each bar to the next so the narrowing reads as one shape.

Learn more at graphy.dev.

Install

npm install @graphysdk/geom-funnel @graphysdk/react

Requires React 19. Its only peer is @graphysdk/react.

Usage

Data is one row per stage, in the order the funnel runs. Map the stage to x and its count to y. The classic funnel, stages running down, is coord.flip(), and the value axis measures from the centre line, so hide it:

import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { funnel } from '@graphysdk/geom-funnel';

const kit = createGraphyKit({ plugins: [funnel] });

const data = {
  columns: [{ key: 'stage' }, { key: 'visitors' }],
  rows: [
    { stage: 'Visited', visitors: 10000 },
    { stage: 'Added to cart', visitors: 3000 },
    { stage: 'Paid', visitors: 1200 },
  ],
};

const spec = kit.pipe(
  kit.createSpec({ x: 'stage', y: 'visitors' }),
  kit.geom.funnel({ dataLabels: { showDataLabels: true } }),
  kit.scale.x.discrete(),
  kit.scale.y.continuous(),
  kit.coord.flip(),
  kit.config({ axes: { y: { isVisible: false } } })
);

export function Checkout() {
  return (
    <kit.GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </kit.GraphProvider>
  );
}

The geom's default funnel stat writes each stage's share of the first stage to funnelPercentOfFirst and of the stage before it to funnelPercentOfPrevious. Map label to either to print it, or name it in a highlight. Under stat: kit.stat.identity(), map percentOfFirst and percentOfPrevious to shares already in your data. params.width sets the fraction of its band a bar spans (0.7 by default). Colour the bars with kit.style.geom.funnel() and the bands between them with kit.style.geom.funnel.connector().

Docs

• Funnel

Feedback

This geom is released early to hear what works. Tell us on Discord.

Licence

This package is available under PolyForm Noncommercial, Small Business, or a 32-day Free Trial. Free Trial is local or internal evaluation only — it does not cover a public page. See what you can do under the trial.

For a commercial licence, talk to us.