WaterfallChart

Live preview

Loading example…

Bridge from a start value to a total: increases and decreases float on the running total, subtotals and totals stand on the baseline, and dashed connectors carry the eye from one step to the next.

Import

import { WaterfallChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/waterfall-chart.

Usage

<WaterfallChart
  title="Caja del día: de la apertura al cierre"
  steps={cajaDelDia}
  valueFormat="currency"
  height={320}
  connectors
  dataLabels
  grid
  legend
  tooltip
  loading={false}
  animate
  increaseLabel="Ingreso"
  decreaseLabel="Egreso"
  totalLabel="Saldo"
  runningLabel="Acumulado"
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`steps` *	`readonly WaterfallStep[]`
`title` *	`string`		Accessible name of the chart.
`description`	`string`
`height`	`number \| "fill"`	`320`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`yAxis`	`ValueAxisOptions`
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	“horizontal” lays the steps top to bottom and the value axis left to right.
`connectors`	`boolean`	`true`	Dashed line from each bar to the next (default true).
`dataLabels`	`boolean`	`true`	Values written above the bars (default true).
`grid`	`boolean`	`true`
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`loading`	`boolean`
`animate`	`boolean`	`true`
`increaseLabel`	`string`	`"Increase"`	Words for the legend, the tooltip and the table.
`decreaseLabel`	`string`	`"Decrease"`
`totalLabel`	`string`	`"Total"`
`runningLabel`	`string`	`"Running total"`
`labels`	`Partial<ChartLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/waterfall-chart/waterfall-chart.tsx