Graphs

Enterprise

Developer

The React funnel chart you don't have to fight.

Drop a production-ready funnel chart into your React app in minutes. Just your data and a single typed config.

Get started

View docs

Why this funnel chart library

The fiddly parts of a funnel chart, already handled.

Zero-to-chart in minutes

Pass a config object, render two components. Sensible pie defaults for spacing, colors, and labels are picked for you.

Zero-to-chart in minutes

Pass a config object, render two components. Sensible pie defaults for spacing, colors, and labels are picked for you.

A funnel that reads at a glance

Bars, gridlines, and the ghosted flow between stages are laid out for you — no need to hand-tune a bar chart into a funnel shape.

A funnel that reads at a glance

Bars, gridlines, and the ghosted flow between stages are laid out for you — no need to hand-tune a bar chart into a funnel shape.

Drop-off & conversion built in

The funnel automatically calculates drop-off between stages and the total conversion rate — no manual math required.

Drop-off & conversion built in

The funnel automatically calculates drop-off between stages and the total conversion rate — no manual math required.

chart-donut

User-editable charts

Set mode="editor" and your users can retitle slices and annotate the chart in-place. Built in, not bolted on.

User-editable charts

Set mode="editor" and your users can retitle slices and annotate the chart in-place. Built in, not bolted on.

TypeScript-first

Every prop and slice option is fully typed. Autocomplete guides you through data, labels, and colors in your IDE.

TypeScript-first

Every prop and slice option is fully typed. Autocomplete guides you through data, labels, and colors in your IDE.

Stages render in data order

Rows render top-to-bottom in the order you pass them, so your funnel always matches your data pipeline.

Stages render in data order

Rows render top-to-bottom in the order you pass them, so your funnel always matches your data pipeline.

How to create a funnel chart in React

Data in, funnel out in three steps.

step 1

Install the SDK

One command, private npm package, TypeScript-first. Works with npm, yarn, pnpm, and bun.

npm install @graphysdk/core

step 2

Define your config

Pass your data, chart type, and any customizations as a single typed GraphConfig object. Fully autocompleted in your IDE.

const config: GraphConfig = {
  type: 'funnel',
  data: { rows: [ … ] },
  options: { showDropoff: true },};

step 3

Render anywhere in your tree

Wrap in GraphProvider and drop in the Graph component. That's it.

<GraphProvider config={config}>
  <Graph /></GraphProvider>

Agents

Don't want to write the config? Let an agent build the funnel.

Graphy's agents read your event data, order the stages, and ship a validated funnel chart — deterministic math, not LLM guesswork.

ask mode

Ask for a funnel chart. Get a good one.

Describe what you want in plain English — “signup funnel from pricing page to paid conversion” — and the agent returns a typed, themed GraphConfig ready to render.

explore mode

Drop in your data. Get the funnel.

Hand the agent raw event counts and it orders the stages, computes drop-off at each step, and proves the conversion story with a clean funnel chart.

 // one call — a funnel your user can read
 import { GraphyAiSdk } from '@graphysdk/agents-sdk'
 import { GraphProvider, Graph } from '@graphysdk/core'
 
 const ai = new GraphyAiSdk({ apiKey })
 const { config } = await ai.generateGraph({
   data: signupEvents,
   userPrompt: 'Funnel of pricing page to paid conversion',
 })
 // → validated, themed funnel chart — ready to ship
 <GraphProvider config={config}><Graph /></GraphProvider>

Math runs in the engine, not the model

Right chart type by scoring rules

Validated before you see it

Your raw data stays private

Explore the agents

Visit playground

Use cases

Great for showing how a whole breaks down.

Sales pipeline

Track leads through qualification, proposal, and close with an automatic drop-off funnel.

Checkout funnel

Spot where shoppers abandon between cart, shipping, payment, and order placed.

Onboarding funnel

Compare invite, signup, and setup completion across a short funnel.

Compare

Side by side with the usual options.

MUI X Charts and AG Grid are capable tools. Here's where a config-first chart API saves you time.

Capability

Graphy

MUI X Charts

Chart.js

Polished funnel defaults out of the box

✓

Drop-off calculated automatically

✓

—

Partial

Total conversion rate built in

✓

—

In-place end-user editor mode

✓

—

✓

Single typed config object

✓

Partial

✓

Comparison reflects out-of-the-box defaults and is intended as a general guide.

FAQ

Funnel chart questions, answered.

How do I make a funnel chart in React?

Install the Graphy SDK, define a config object with type: 'funnel' and your stages in order, then render <GraphProvider config={config}><Graph /></GraphProvider>. The bars, labels, and drop-off math are handled for you — no manual SVG or canvas work.

Do I need a separate charting library?

No. The funnel shape, labels, and drop-off annotations ship in one package. You pass stage data in and get a production-ready funnel out, rather than assembling shapes yourself.

How do I show drop-off between stages?

The funnel automatically calculates drop-off between stages — no flag required. Use the data-labels config to control how it's displayed, including as a percentage, an absolute value, or both.

Can I customize the bar color?

Yes — set options.color or pass a palette. The ghosted flow area connecting each stage picks up a lighter tint of that color automatically.

Can I show the total conversion rate?

Yes — options.showConversionRate displays the overall percentage from the first stage to the last, the same stat shown above the chart here.

How is this different from MUI X Charts or react-google-charts?

Those are capable tools, but neither ships a dedicated, typed funnel chart with drop-off math out of the box. This is a config-first chart API: polished defaults, an optional end-user editor, and fine-grained overrides only when you want them.