Vesture
Get Started

Charts

WaterfallChartNew in 0.8.0

Shows how a starting value is built up or eroded by a sequence of increases and decreases, ending in totals.

WaterfallChart

Preview

Bar gap
Radius
$0k$215k$430k$645k$860kOpening: $500k$500kOpeningNew: $220k+$220kNewExpansion: $140k+$140kExpansionChurn: $-180k$-180kChurnContraction: $-60k$-60kContractionClosing: $620k$620kClosing

Click a bar

Usage

tsx
import { WaterfallChart } from "@vesture/react";

<WaterfallChart
  width={600}
  height={320}
  data={[
    { key: "o", label: "Opening", value: 500, type: "total" },
    { key: "n", label: "New", value: 220 },
    { key: "c", label: "Churn", value: -180 },
    { key: "e", label: "Closing", value: 0, type: "total" },
  ]}
/>

Behavior

  • Items default to type "delta" and float from the running total. type "total" anchors at zero; a total with value 0 shows the running total so far.

Props

PropTypeDefaultDescription
data{ key; label; value; type?: 'delta' | 'total' }[]—Required.
width / heightnumber—Required, in px.
positiveColor / negativeColor / totalColorstring—Override the success / danger / primary tokens.
showConnectors / showLabelsbooleantrueDashed connectors and value labels.
barGap / barRadiusnumber0.3 / 2Bar spacing and rounding.
formatValue(v: number) => string—Axis and label formatting.
onBarClick(datum) => void—Makes bars clickable.