Waterfall Chart

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

Installation

$ pnpm dlx 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.

Props8

Prop	Type	Default
start	WaterfallStepDEFAULT_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) => stringdefaultFormat 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	number1 Playback multiplier.

startWaterfallStep
The opening column, with a label and value.
DefaultDEFAULT_START
stepsWaterfallStep[]
Changes applied in order; negative values step down.
DefaultDEFAULT_STEPS
totalLabelstring
Label on the final total column.
Default"MRR"
titlestring
Small heading over the chart.
Default"Net revenue, Q3"
format(value: number) => string
Turns a number into display text, such as $84k.
DefaultdefaultFormat
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1