React Waterfall Chart

Show how values increase and decrease with a React waterfall chart. Automatic running totals, positive/negative color coding, subtotal and total markers, and connector lines. Style everything with Tailwind.

$npm install @chartts/react
example.tsx
import { WaterfallChart } from "@chartts/react"

export function ProfitWaterfall() {
  const data = [
    { label: "Revenue", value: 420000 },
    { label: "COGS", value: -180000 },
    { label: "Gross Profit", type: "subtotal" },
    { label: "OpEx", value: -95000 },
    { label: "Tax", value: -43000 },
    { label: "Net Income", type: "total" },
  ]

  return (
    <WaterfallChart
      data={data}
      label="label"
      value="value"
      className="h-72"
      upClassName="fill-emerald-500"
      downClassName="fill-red-500"
    />
  )
}

Features

Automatic running totals
Positive/negative color coding
Subtotal and total markers
Connector lines between bars
Tailwind className on every element
Financial reporting ready
Under 3kb tree-shaken
Read the DocsSee DemosExamples