Graphs

Enterprise

Developer

The React waterfall chart you don't have to build by hand.

Running totals, up and down bars, and connectors. All derived from your rows and a single typed config.

Get access

View docs

Why this waterfall chart library

The bookkeeping behind a waterfall, already done.

Zero-to-chart in minutes

Pass a config object, render two components. Bar widths, spacing, colors, and axis are picked for you.

Zero-to-chart in minutes

Pass a config object, render two components. Bar widths, spacing, colors, and axis are picked for you.

Running totals and connectors, handled

Give the chart signed deltas. It bases each bar on the cumulative total and links every step with a connector line, with no helper columns or offset series.

Running totals and connectors, handled

Give the chart signed deltas. It bases each bar on the cumulative total and links every step with a connector line, with no helper columns or offset series.

Increases and decreases, colored

Positive values rise, negative values fall, and each gets its own color automatically. Totals stand apart.

Increases and decreases, colored

Positive values rise, negative values fall, and each gets its own color automatically. Totals stand apart.

chart-donut

A value on every step

Turn on showDataLabels and each bar carries its own number, formatted with your currency and decimal settings.

A value on every step

Turn on showDataLabels and each bar carries its own number, formatted with your currency and decimal settings.

TypeScript-first

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

TypeScript-first

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

User-editable charts

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

User-editable charts

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

How it works

Deltas in, waterfall out — in three steps.

step 1

Install the SDK

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

npm install @graphysdk/core

step 2

Define your waterfall config

Set type: 'waterfall', pass a category column and a signed amount column. Positives rise, negatives fall.

const config: GraphConfig = {
  type: 'waterfall',
  data: { rows: [ … ] },
  dataLabels: { showDataLabels: 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 bridge.

Graphy's agents read your dataset, work out which steps drive the change, and ship a validated waterfall. The math runs in the engine, so you get deterministic numbers rather than LLM guesswork.

ask mode

Ask for a bridge. Get a good one.

Describe what you want in plain English — “waterfall from opening to closing cash” — and the agent returns a typed, themed GraphConfig ready to render.

explore mode

Drop in your data. Get the chart.

Hand the agent a raw dataset and it finds the variance that matters, picks the chart type with scoring rules, and proves the movement step by step.

// one call — a waterfall your CFO 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: quarterlyLedger,
  userPrompt: 'Waterfall from opening to closing balance',
})
// → validated, themed waterfall — 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 explaining how you got from A to B.

P&L bridge

Walk from revenue to net profit so every deduction along the way is visible and named.

Budget vs actual

Break a variance into the line items that caused it instead of arguing over one number.

Headcount changes

Show joiners and leavers between two dates and land on the closing headcount.

Compare

Side by side with the usual options.

Capability

Graphy

MUI X Charts

Chart.js

Polished waterfall defaults out of the box

✓

Partial

Running totals from raw deltas, no cumulative flags

✓

Partial

Value labels on every step with one flag

✓

Partial

AI agent that writes the chart config

✓

—

In-place end-user editor mode

✓

—

Single typed config object

✓

—

FAQ

Waterfall chart questions, answered.

How do I make a waterfall chart in React?

To make a waterfall chart in React with Graphy: (1) install the SDK with npm install @graphysdk/core; (2) create a config object with type: 'waterfall'; (3) add a category column and a signed amount column to config.data, using positive values for increases and negative values for decreases; (4) render <GraphProvider config={config}><Graph /></GraphProvider>. Graphy calculates the running totals, draws the rising and falling bars, and connects each step automatically.

Do I have to calculate the running totals myself?

No. Pass the deltas as they appear in your data — positive for increases, negative for decreases — and the chart bases each bar on the cumulative total, closing with the final value.

How are increases and decreases colored?

Upward bars, downward bars, and total bars each get a distinct color from the active theme. You can override any of them if your finance team has house colors.

Can I show the value on each bar?

Yes. Set dataLabels: { showDataLabels: true } and each step renders its value above the bar, formatted with your number settings.

When should I use a waterfall instead of a column chart?

Use a waterfall when the story is how a starting number became an ending one — profit bridges, budget variance, headcount movement. Use a column chart when the categories are independent and no running total is implied.