# Waterfall Chart
URL: https://remocn.dev/docs/numbers/waterfall-chart

A revenue waterfall steps through gains and losses into a gradient total of $84k MRR

- Install: `npx shadcn@latest add @remocn/waterfall-chart`
- Vibe: data
- Natural length: 111f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/waterfall-chart
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WaterfallChart } from "@/components/remocn/waterfall-chart";

const WaterfallChartScene = () => (
  <WaterfallChart
    title="Net revenue, Q3"
    start={{ label: "Start", value: 52 }}
    steps={[
      { label: "Churn", value: -7 },
      { label: "New", value: 24 },
      { label: "Expansion", value: 12 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="WaterfallChart"
    component={WaterfallChartScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A starting column is set, then each step floats up or down as a green gain or red loss, and the total rises last in gradient while its value counts up. Pass `start`, `steps` (label and signed value), `totalLabel` and `title`; use `format` to control how numbers print. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `start` | `WaterfallStep` | `DEFAULT_START` | The opening column, with a label and value. |
| `steps` | `WaterfallStep[]` | `DEFAULT_STEPS` | Changes applied in order; negative values step down. |
| `totalLabel` | `string` | `"MRR"` | Label on the final total column. |
| `title` | `string` | `"Net revenue, Q3"` | Small heading over the chart. |
| `format` | `(value: number) => string` | `defaultFormat` | Turns a number into display text, such as $84k. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A revenue or metric bridge where gains and losses step from a start value to a total, such as $84k MRR.
- A beat that explains churn, expansion and new business as separate contributions.
- A finance-flavored update scene where the final total should land in gradient.

## Don't use when
- You have simple category values with no running total — use `spring-bars`.
- You want the total framed as a share of a whole — use `share-donut`.
- You want a trend over time — use `growth-line`.