Dithered waterfall charts for React

import { WaterfallChart } from "@/components/dithercharts/waterfall-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", cash: 120 },
  { month: "Feb", cash: 80 },
  { month: "Mar", cash: -60 },
  { month: "Apr", cash: 140 },
  { month: "May", cash: -30 },
  { month: "Jun", cash: 90 },
  { month: "Jul", cash: -110 },
  { month: "Aug", cash: 60 },
]

const chartConfig = {
  cash: { label: "Cash" },
} satisfies ChartConfig

export function ChartWaterfall() {
  return (
    <WaterfallChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      dataKey="cash"
      label="Cash flow"
    />
  )
}

import { WaterfallChart } from "@/components/dithercharts/waterfall-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { step: "Jan", net: 40 },
  { step: "Feb", net: -15 },
  { step: "Mar", net: 30 },
  { step: "Q1", net: 0, subtotal: 1 },
  { step: "Apr", net: 25 },
  { step: "May", net: -40 },
  { step: "Jun", net: 35 },
  { step: "Q2", net: 0, subtotal: 1 },
]

const chartConfig = {
  net: { label: "Net" },
} satisfies ChartConfig

export function ChartWaterfallSubtotals() {
  return (
    <WaterfallChart
      data={chartData}
      config={chartConfig}
      xKey="step"
      dataKey="net"
      totalKey="subtotal"
      total={false}
      label="Net income by quarter"
    />
  )
}

import { WaterfallChart } from "@/components/dithercharts/waterfall-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", cash: -80 },
  { month: "Feb", cash: -60 },
  { month: "Mar", cash: 50 },
  { month: "Apr", cash: 70 },
  { month: "May", cash: 90 },
]

const chartConfig = {
  cash: { label: "Cash" },
} satisfies ChartConfig

export function ChartWaterfallBelowZero() {
  return (
    <WaterfallChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      dataKey="cash"
      label="Cash after launch"
    />
  )
}

import { WaterfallChart } from "@/components/dithercharts/waterfall-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { month: "Jan", cash: 120 },
  { month: "Feb", cash: 80 },
  { month: "Mar", cash: -60 },
  { month: "Apr", cash: 140 },
  { month: "May", cash: -30 },
  { month: "Jun", cash: 90 },
  { month: "Jul", cash: -110 },
  { month: "Aug", cash: 60 },
]

const chartConfig = {
  cash: { label: "Cash" },
} satisfies ChartConfig

export function ChartWaterfallNoConnectors() {
  return (
    <WaterfallChart
      data={chartData}
      config={chartConfig}
      xKey="month"
      dataKey="cash"
      label="Cash flow"
      connectors={false}
      yAxis
    />
  )
}