# WaterfallChart

> 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 …

Source: https://ui.jcsoftdev.com/docs/components/waterfall-chart

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/charts-waterfallchart--default)
- [Without Connectors](/storybook/?path=/story/charts-waterfallchart--without-connectors)
- [Negative Balance](/storybook/?path=/story/charts-waterfallchart--negative-balance)
- [Horizontal](/storybook/?path=/story/charts-waterfallchart--horizontal)
- [Loading](/storybook/?path=/story/charts-waterfallchart--loading)
- [Empty](/storybook/?path=/story/charts-waterfallchart--empty)
- [Narrow](/storybook/?path=/story/charts-waterfallchart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-waterfallchart--fill-parent)

## Source

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