Waterfall Chart

Waterfall charts show how an initial value is increased or decreased by intermediate values. Chart.ts renders them as SVG with automatic running totals, positive/negative coloring, and connector lines. Style everything with Tailwind CSS.

$npm install @chartts/core
example.tsx
import { waterfall } from "@chartts/core"

const svg = waterfall({
  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" },
  ],
  label: "label",
  value: "value",
})

Features

Automatic running totals
Positive/negative color coding
Subtotal and total markers
Connector lines between bars
Tailwind className on every element
Financial reporting ready
SVG rendering with accessibility
Read the DocsSee DemosExamples