2

Waterfall Chart

PreviousNext

Waterfall charts showing cumulative effect of sequential values.

+5,200+1,800+1,200+650+8,850-2,400-850-1,200-950+3,450-180-720+2,550RevenueProduct SalesServicesLicensingGross ProfitSalariesMarketingOperationsR&DOperating IncomeInterestTaxesNet IncomeCategory02.0K4.0K6.0K8.0K10.0KAmount ($K)
"use client"

import { WaterfallChart } from "@/components/ui/charts"

// P&L Statement breakdown
const data = [
  { label: "Revenue", value: 5200, isTotal: true },
  { label: "Product Sales", value: 1800 },
  { label: "Services", value: 1200 },
  { label: "Licensing", value: 650 },
  { label: "Gross Profit", value: 8850, isSubtotal: true },
  { label: "Salaries", value: -2400 },
  { label: "Marketing", value: -850 },
  { label: "Operations", value: -1200 },
  { label: "R&D", value: -950 },
  { label: "Operating Income", value: 3450, isSubtotal: true },
  { label: "Interest", value: -180 },
  { label: "Taxes", value: -720 },
  { label: "Net Income", value: 2550, isTotal: true },
]

export function WaterfallChartDemo() {
  return (
    <div className="mx-auto w-full max-w-xl">
      <WaterfallChart
        data={data}
        width={560}
        height={380}
        xAxisLabel="Category"
        yAxisLabel="Amount ($K)"
        positiveColor="#2563eb"
        negativeColor="#60a5fa"
        totalColor="#1e40af"
      />
    </div>
  )
}

About

The Waterfall Chart displays how an initial value is affected by a series of positive or negative values.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/waterfall-chart.json

Usage

import { WaterfallChart } from "@/components/ui/charts"
 
const data = [
  { label: "Start", value: 1000, isTotal: true },
  { label: "Revenue", value: 500 },
  { label: "Costs", value: -200 },
  { label: "Tax", value: -100 },
  { label: "End", value: 1200, isTotal: true },
]
 
export function Example() {
  return <WaterfallChart data={data} />
}

API Reference

PropTypeDefaultDescription
dataWaterfallDataPoint[]requiredData with values and totals
positiveColorstring"var(--chart-2)"Color for positive values
negativeColorstring"var(--chart-1)"Color for negative values
totalColorstring"var(--chart-3)"Color for total bars
showConnectorbooleantrueShow connector lines

Examples

Quarterly Revenue

Track ARR changes across quarters with sales, renewals, and churn.

+2,400+850+420-280+3,390+720+380-190+4,300Q1 StartNew SalesRenewalsChurnQ1 EndQ2 EndPeriod01.0K2.0K3.0K4.0K5.0KARR ($K)
"use client"

import { WaterfallChart } from "@/components/ui/charts"

// Quarterly revenue changes
const data = [
  { label: "Q1 Start", value: 2400, isTotal: true },
  { label: "New Sales", value: 850 },
  { label: "Renewals", value: 420 },
  { label: "Churn", value: -280 },
  { label: "Q1 End", value: 3390, isSubtotal: true },
  { label: "New Sales", value: 720 },
  { label: "Renewals", value: 380 },
  { label: "Churn", value: -190 },
  { label: "Q2 End", value: 4300, isTotal: true },
]

export function WaterfallChartQuarterlyDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <WaterfallChart
        data={data}
        width={500}
        height={350}
        xAxisLabel="Period"
        yAxisLabel="ARR ($K)"
        positiveColor="#2563eb"
        negativeColor="#93c5fd"
        totalColor="#1e40af"
      />
    </div>
  )
}

Budget Variance

Analyze the variance between budget and actual results.

+1,000+150+80-45+120-85-35+25+1,210BudgetVolumePriceMixCost SavingsInflationFX ImpactOtherActualVariance Driver05001.0K1.5KAmount ($K)
"use client"

import { WaterfallChart } from "@/components/ui/charts"

// Budget variance analysis
const data = [
  { label: "Budget", value: 1000, isTotal: true },
  { label: "Volume", value: 150 },
  { label: "Price", value: 80 },
  { label: "Mix", value: -45 },
  { label: "Cost Savings", value: 120 },
  { label: "Inflation", value: -85 },
  { label: "FX Impact", value: -35 },
  { label: "Other", value: 25 },
  { label: "Actual", value: 1210, isTotal: true },
]

export function WaterfallChartBudgetDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <WaterfallChart
        data={data}
        width={500}
        height={350}
        xAxisLabel="Variance Driver"
        yAxisLabel="Amount ($K)"
        positiveColor="#3b82f6"
        negativeColor="#60a5fa"
        totalColor="#1e40af"
      />
    </div>
  )
}

Inventory Movement

Track inventory changes with receipts, production, and sales.

+5,000+2,200+1,800-3,500+150-120-80+5,450OpeningReceivedProductionSalesReturnsDamagedAdjustmentsClosingMovement Type02.0K4.0K6.0K8.0K10.0KUnits
"use client"

import { WaterfallChart } from "@/components/ui/charts"

// Inventory movement tracking
const data = [
  { label: "Opening", value: 5000, isTotal: true },
  { label: "Received", value: 2200 },
  { label: "Production", value: 1800 },
  { label: "Sales", value: -3500 },
  { label: "Returns", value: 150 },
  { label: "Damaged", value: -120 },
  { label: "Adjustments", value: -80 },
  { label: "Closing", value: 5450, isTotal: true },
]

export function WaterfallChartInventoryDemo() {
  return (
    <div className="mx-auto w-full max-w-lg">
      <WaterfallChart
        data={data}
        width={500}
        height={350}
        xAxisLabel="Movement Type"
        yAxisLabel="Units"
        positiveColor="#2563eb"
        negativeColor="#93c5fd"
        totalColor="#1e40af"
      />
    </div>
  )
}

Minimal

Simple profit calculation with basic categories.

+500-180-120-50+150RevenueCOGSExpensesTaxProfitCategory0100200300400500Amount ($K)
"use client"

import { WaterfallChart } from "@/components/ui/charts"

// Simple profit calculation
const data = [
  { label: "Revenue", value: 500, isTotal: true },
  { label: "COGS", value: -180 },
  { label: "Expenses", value: -120 },
  { label: "Tax", value: -50 },
  { label: "Profit", value: 150, isTotal: true },
]

export function WaterfallChartMinimalDemo() {
  return (
    <div className="mx-auto w-full max-w-md">
      <WaterfallChart
        data={data}
        width={420}
        height={320}
        xAxisLabel="Category"
        yAxisLabel="Amount ($K)"
        positiveColor="#3b82f6"
        negativeColor="#60a5fa"
        totalColor="#1e40af"
      />
    </div>
  )
}

Notes

  • Waterfall charts are ideal for visualizing how an initial value changes through a series of positive and negative contributions
  • Commonly used in financial reporting to show profit/loss breakdowns, budget variance analysis, and cash flow statements
  • The isTotal flag marks bars that represent cumulative totals rather than incremental changes
  • Connector lines visually link sequential bars, making it easy to follow the flow from start to finish
  • Different colors for positive, negative, and total values help users quickly understand the nature of each contribution
  • Particularly effective for presenting financial data to stakeholders who need to understand sequential changes over time