Waterfall Chart

Hover or tap a step to inspect it. Use arrow keys to move, Enter to select, and View data for exact values.

Quick start

import { WaterfallChart } from "@/components/charts/waterfall-chart";

const steps = [
  { label: "Opening", value: 100000, type: "total" },
  { label: "Sales", value: 45000 },
  { label: "Costs", value: -28000 },
  { label: "Closing", type: "sum" },
] as const;

export function CashFlow() {
  return <WaterfallChart data={steps} height={360}
    showValues showLegend showGrid
    valueFormatter={value => new Intl.NumberFormat("en-US", {
      style: "currency", currency: "USD", notation: "compact",
    }).format(value)} />;
}

Choose the right step

For gross profit or an ending balance, use sum. For the movement within a period, use subtotal. Computed rows omit value; giving one is an actionable error. Explicit totals keep the original API’s reset behavior.

Reading the chart

Floating bars start at the previous balance. The zero line stays visible even when the balance becomes negative. Zero changes use a thin marker; tiny changes retain their true size and remain accessible through larger invisible targets and View data. Long sequences scroll within the chart. No rows are hidden or reordered.

Green and red indicate increases and decreases. For costs or other metrics where lower is better, choose colors that suit your context. Signed labels, step types and inspection carry the meaning alongside color.

Compatibility

Existing numeric increase, decrease and total rows keep their behavior. Numeric strings, missing values and unknown types now show an error instead of silently changing the balance. Custom tooltips can also receive sum and subtotal types and now include the previous balance, geometric start/end and formatted values.

API reference