Waterfall Chart

Show how an initial value is affected by positive and negative changes. Perfect for financial breakdowns and variance analysis.

Usage

example.tsx

import { WaterfallChart } from "@chartts/react"

<WaterfallChart
  data={profitBreakdown}
  x="category"
  y="amount"
  total="isTotal"
/>

Props

Prop	Type	Description
data	T[]	Array of data objects
x	keyof T	Key for category labels
y	keyof T	Key for values
total	keyof T	Key for boolean indicating total bars
upColor	string	Color for increases. Default: '#10b981'
downColor	string	Color for decreases. Default: '#ef4444'
totalColor	string	Color for total bars. Default: '#22d3ee'