---
title: "Waterfall Series"
enterprise: true
framework: react
version: "14.1.0"
---

# Waterfall Series

A Waterfall Series shows the cumulative effect of sequential positive or negative data values. It utilises rising and falling bars to create a cascading waterfall effect.

## Simple Waterfall

#### Simple Waterfall

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Simple Waterfall](https://www.ag-grid.com/charts/reactFunctionalTs/waterfall-series/examples/simple-waterfall)

The Waterfall Series is designed to display a single series and is created using the `waterfall` series type.

```js
{
    series: [
        {
            type: 'waterfall',
            xKey: 'financials',
            yKey: 'amount',
        },
    ],
}
```

The `xKey` defines categories for the [Category Axis](https://www.ag-grid.com/charts/react/axes-types/#category), and the `yKey` supplies numerical values for the [Number Axis](https://www.ag-grid.com/charts/react/axes-types/#number).

> **Note**
>
> Legend toggling is disabled in Waterfall Series to avoid misleading or incorrect data representation.

## Total / Subtotal Values

Adding Total and Subtotal values at specific points in a Waterfall Series can make the data easier to interpret. These values are automatically calculated based on the following criteria:

- **Total**: Accumulates all values from the starting point (zero) up to the current point.
- **Subtotal**: Begins at the last Total or Subtotal and sums up to the current point.

#### Total Subtotal Values

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
        totals: [
          {
            totalType: "subtotal",
            index: 4,
            axisLabel: "Total Revenue",
            itemId: "total-revenue",
          },
          {
            totalType: "subtotal",
            index: 9,
            axisLabel: "Total Expenditure",
            itemId: "total-expenditure",
          },
          {
            totalType: "total",
            index: 9,
            axisLabel: "Total Borrowing",
            itemId: "total-borrowing",
          },
        ],
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Total Subtotal Values](https://www.ag-grid.com/charts/reactFunctionalTs/waterfall-series/examples/total-subtotal-values)

Total and Subtotal values are added to the `totals` array within the `series` options object.

```js
{
    series: [
        {
            type: 'waterfall',
            xKey: 'financials',
            yKey: 'amount',
            totals: [
                { totalType: 'subtotal', index: 4, axisLabel: 'Total Revenue', itemId: 'total-revenue' },
                { totalType: 'subtotal', index: 9, axisLabel: 'Total Expenditure', itemId: 'total-expenditure' },
                { totalType: 'total', index: 9, axisLabel: 'Total Borrowing', itemId: 'total-borrowing' },
            ],
        },
    ],
}
```

In this configuration:

- `totalType` specifies whether the value is a Total or Subtotal.
- `index` determines the position in the data after which the Total or Subtotal will appear.
- `axisLabel` is the label shown as a category on the [Category Axis](https://www.ag-grid.com/charts/react/axes-types/#category).
- [`itemId`](https://www.ag-grid.com/charts/react/events/#item-identifiers) is an optional unique identifier for the total, surfaced in events and callbacks. Totals that share an `axisLabel` must each set a unique `itemId` to remain distinguishable.

## Customisation

### Series Items

#### Customising Series Items

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
        item: {
          positive: {
            fill: "#4A90E2",
            stroke: "#4A90E2",
          },
          negative: {
            fill: "#FF6B6B",
            stroke: "#FF6B6B",
          },
          total: {
            name: "Total / Subtotal",
            fill: "#404066",
            stroke: "#404066",
          },
        },
        totals: [
          { totalType: "subtotal", index: 4, axisLabel: "Total Revenue" },
          {
            totalType: "subtotal",
            index: 9,
            axisLabel: "Total Expenditure",
          },
          { totalType: "total", index: 9, axisLabel: "Total Borrowing" },
        ],
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Customising Series Items](https://www.ag-grid.com/charts/reactFunctionalTs/waterfall-series/examples/customising-series-items)

Series items are customised via the `item` configuration object.

```js
{
    series: [
        {
            type: 'waterfall',
            xKey: 'financials',
            yKey: 'amount',
            item: {
                positive: {
                    fill: '#4A90E2',
                    stroke: '#4A90E2',
                },
                negative: {
                    fill: '#FF6B6B',
                    stroke: '#FF6B6B',
                },
                total: {
                    name: 'Total / Subtotal',
                    fill: '#404066',
                    stroke: '#404066',
                },
            },
        },
    ],
}
```

In this configuration:

- `positive` and `negative` change Positive/Negative series items.
- `total` changes Total/Subtotal series items.

Note that the `total` series item also contains a `name` property to change the total name to 'Total / Subtotal' in the Total legend item and tooltips.

### Connector Lines

#### Customising Connector Lines

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
        line: {
          strokeWidth: 4,
          stroke: "red",
        },
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Customising Connector Lines](https://www.ag-grid.com/charts/reactFunctionalTs/waterfall-series/examples/customising-connector-lines)

Connector lines between the bars can be customised using the `line` property.

```js
{
    series: [
        {
            type: 'waterfall',
            xKey: 'financials',
            yKey: 'amount',
            line: {
                strokeWidth: 4,
                stroke: 'red',
            },
        },
    ],
}
```

To remove the connector lines, set `line.enabled` to `false`.

## Horizontal Waterfall

#### Horizontal Waterfall

```tsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgChartOptions,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  WaterfallSeriesModule,
} from "ag-charts-enterprise";
import { getData } from "./data";

ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  WaterfallSeriesModule,
  ContextMenuModule,
]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    data: getData(),
    title: {
      text: "UK Government Budget",
    },
    subtitle: {
      text: "All values in £ billions",
    },
    series: [
      {
        type: "waterfall",
        direction: "horizontal",
        xKey: "financials",
        xName: "Financials",
        yKey: "amount",
        yName: "Amount",
      },
    ],
  });

  return <AgCharts options={options} />;
};

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);
```

[Live example: Horizontal Waterfall](https://www.ag-grid.com/charts/reactFunctionalTs/waterfall-series/examples/horizontal-waterfall)

To show a Horizontal Waterfall Series, set `direction: 'horizontal'`.

```js
{
    series: [
        {
            type: 'waterfall',
            direction: 'horizontal',
            xKey: 'financials',
            yKey: 'amount',
        },
    ],
}
```

When the `direction` is `'horizontal'` the `xKey` values will be plotted on the default `y` axis, while the `yKey` values will be plotted on the default `x` axis. values along the x-axis.

## API Reference

#### Waterfall Series

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| type (required) | 'waterfall' |  | Configuration for the Waterfall Series. |
| xKey (required) | DatumKey |  | The key to use to retrieve x-values from the data. |
| yKey (required) | DatumKey |  | The key to use to retrieve y-values from the data. |
| totals | WaterfallSeriesTotalMeta[] |  | Configuration of total and subtotal values. |
| totals.totalType (required) | 'subtotal' \| 'total' |  | Configuration for the calculation of the value. This can be `total` or `subtotal`, `total` shows the cumulative value from `0` to the current data position, while `subtotal` shows the cumulative value from the previous subtotal value to the current position. |
| totals.index (required) | number |  | The index after which the total item will be displayed. |
| totals.axisLabel (required) | string |  | The label to display at the axis position where the total value is positioned. |
| totals.itemId | string |  | A unique identifier for the `itemId` of this bar in events and callbacks. When omitted, `itemId` falls back to the bar's `axisLabel`. |
| id | string | auto-generated value | Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value. |
| context | ContextDefault |  | Context object to use in callbacks. |
| data | DatumDefault[] |  | The data to use when rendering the series. If this is not supplied, data must be set on the chart instead. |
| visible | boolean |  | Whether to display the series. |
| cursor | string |  | The cursor to use for hovered markers. This config is identical to the CSS `cursor` property. |
| highlight | AgHighlightOptions |  | Configuration for highlighting when a series or legend item is hovered over. |
| highlight.enabled | boolean |  | Set to `false` to disable highlighting. |
| highlight.highlightedItem | AgHighlightStyleOptions |  | Options for the highlighted item. |
| highlight.highlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.highlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.highlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.highlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.highlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.highlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.highlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.highlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| highlight.unhighlightedItem | AgHighlightStyleOptions |  | Options for the un-highlighted items when there is an active highlight. |
| highlight.unhighlightedItem.opacity | Opacity |  | The opacity of the whole series (line, fill, labels and markers, if any) |
| highlight.unhighlightedItem.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| highlight.unhighlightedItem.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| highlight.unhighlightedItem.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| highlight.unhighlightedItem.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| highlight.unhighlightedItem.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| highlight.unhighlightedItem.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| highlight.unhighlightedItem.fillOpacity | Opacity |  | The opacity of the fill colour. |
| nodeClickRange | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a node that a click triggers the listener. |
| showInLegend | boolean |  | Whether to include the series in the legend. |
| listeners | AgSeriesListeners |  | A map of event names to event listeners. |
| listeners.seriesNodeClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. |
| listeners.seriesNodeDoubleClick | Listener |  | The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double-clicked. |
| xKeyAxis | string | 'x' | The key of the x-axis to which this series is bound. |
| yKeyAxis | string | 'y' | The key of the y-axis to which this series is bound. |
| xName | string |  | A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| yName | string |  | A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters. |
| direction | 'horizontal' \| 'vertical' |  | Bar rendering direction.  __Note:__ This option affects the layout direction of X and Y data values. |
| item | AgWaterfallSeriesItem |  | Configuration used for the waterfall series item types. |
| item.negative | AgWaterfallSeriesItemOptions |  | Configuration for the negative series items. |
| item.negative.name | string |  | A human-readable description of the y-values. If supplied, this will be shown in the legend and default tooltip and passed to the tooltip renderer as one of the parameters. |
| item.negative.label | AgWaterfallSeriesLabelOptions |  | Configuration for the labels shown on top of data points. |
| item.negative.label.placement | AgWaterfallSeriesLabelPlacement \| AgWaterfallSeriesLabelPlacement[] |  | Where to render series labels relative to the bars. Either a single placement or an ordered fallback list tried in turn until one fits. |
| item.negative.label.spacing | PixelSize |  | Spacing in pixels between the label and the edge of the bar. |
| item.negative.label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. |
| item.negative.label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| item.negative.label.format | string |  | Format string used when rendering labels. |
| item.negative.label.itemStyler | Styler |  | Function used to style individual datum labels. |
| item.negative.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.negative.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.negative.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| item.negative.label.fontFamily | FontFamily |  | The font family for text elements. |
| item.negative.label.fontStyle | FontStyle |  | The style to use for text elements. |
| item.negative.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| item.negative.label.border | BorderOptions |  | Stroke options for the box border. |
| item.negative.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.negative.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.negative.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.negative.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.negative.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| item.negative.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| item.negative.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.negative.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.negative.label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| item.negative.label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| item.negative.label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| item.negative.label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.negative.label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.negative.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| item.negative.label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| item.negative.label.insideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is inside the shape. |
| item.negative.label.insideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.negative.label.insideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.negative.label.insideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.negative.label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.negative.label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.negative.label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.negative.label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.negative.label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.negative.label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.negative.label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is outside the shape. |
| item.negative.label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.negative.label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.negative.label.outsideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.negative.label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.negative.label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.negative.label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.negative.label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.negative.label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.negative.label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.negative.shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the series items. |
| item.negative.shadow.enabled | boolean |  | Whether the shadow is visible. |
| item.negative.shadow.color | CssColor |  | The colour of the shadow. |
| item.negative.shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| item.negative.shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| item.negative.shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| item.negative.itemStyler | Styler |  | Function used to return formatting for individual Waterfall series item cells, based on the given parameters. |
| item.negative.tooltip | AgWaterfallSeriesItemTooltip |  | Series item specific tooltip configuration. |
| item.negative.tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| item.negative.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| item.negative.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.negative.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.negative.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.negative.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.negative.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.negative.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.negative.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item.positive | AgWaterfallSeriesItemOptions |  | Configuration for the positive series items. |
| item.positive.name | string |  | A human-readable description of the y-values. If supplied, this will be shown in the legend and default tooltip and passed to the tooltip renderer as one of the parameters. |
| item.positive.label | AgWaterfallSeriesLabelOptions |  | Configuration for the labels shown on top of data points. |
| item.positive.label.placement | AgWaterfallSeriesLabelPlacement \| AgWaterfallSeriesLabelPlacement[] |  | Where to render series labels relative to the bars. Either a single placement or an ordered fallback list tried in turn until one fits. |
| item.positive.label.spacing | PixelSize |  | Spacing in pixels between the label and the edge of the bar. |
| item.positive.label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. |
| item.positive.label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| item.positive.label.format | string |  | Format string used when rendering labels. |
| item.positive.label.itemStyler | Styler |  | Function used to style individual datum labels. |
| item.positive.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.positive.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.positive.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| item.positive.label.fontFamily | FontFamily |  | The font family for text elements. |
| item.positive.label.fontStyle | FontStyle |  | The style to use for text elements. |
| item.positive.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| item.positive.label.border | BorderOptions |  | Stroke options for the box border. |
| item.positive.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.positive.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.positive.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.positive.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.positive.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| item.positive.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| item.positive.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.positive.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.positive.label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| item.positive.label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| item.positive.label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| item.positive.label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.positive.label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.positive.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| item.positive.label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| item.positive.label.insideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is inside the shape. |
| item.positive.label.insideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.positive.label.insideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.positive.label.insideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.positive.label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.positive.label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.positive.label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.positive.label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.positive.label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.positive.label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.positive.label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is outside the shape. |
| item.positive.label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.positive.label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.positive.label.outsideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.positive.label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.positive.label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.positive.label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.positive.label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.positive.label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.positive.label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.positive.shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the series items. |
| item.positive.shadow.enabled | boolean |  | Whether the shadow is visible. |
| item.positive.shadow.color | CssColor |  | The colour of the shadow. |
| item.positive.shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| item.positive.shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| item.positive.shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| item.positive.itemStyler | Styler |  | Function used to return formatting for individual Waterfall series item cells, based on the given parameters. |
| item.positive.tooltip | AgWaterfallSeriesItemTooltip |  | Series item specific tooltip configuration. |
| item.positive.tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| item.positive.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| item.positive.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.positive.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.positive.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.positive.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.positive.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.positive.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.positive.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| item.total | AgWaterfallSeriesItemOptions |  | Configuration for the total and subtotal series items. |
| item.total.name | string |  | A human-readable description of the y-values. If supplied, this will be shown in the legend and default tooltip and passed to the tooltip renderer as one of the parameters. |
| item.total.label | AgWaterfallSeriesLabelOptions |  | Configuration for the labels shown on top of data points. |
| item.total.label.placement | AgWaterfallSeriesLabelPlacement \| AgWaterfallSeriesLabelPlacement[] |  | Where to render series labels relative to the bars. Either a single placement or an ordered fallback list tried in turn until one fits. |
| item.total.label.spacing | PixelSize |  | Spacing in pixels between the label and the edge of the bar. |
| item.total.label.orientation | AgChartLabelOrientation \| AgChartLabelOrientation[] | horizontal | Orientation of the label within the bar. `horizontal` reads upright; the two `vertical` variants rotate it a quarter-turn in opposite directions. Either a single orientation or an ordered fallback list tried in turn until one fits. |
| item.total.label.formatter | RichFormatter |  | A custom formatting function used to convert data values into text for display by labels. |
| item.total.label.format | string |  | Format string used when rendering labels. |
| item.total.label.itemStyler | Styler |  | Function used to style individual datum labels. |
| item.total.label.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.total.label.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.total.label.fontSize | FontSize |  | The size of the font in pixels for text elements. |
| item.total.label.fontFamily | FontFamily |  | The font family for text elements. |
| item.total.label.fontStyle | FontStyle |  | The style to use for text elements. |
| item.total.label.fontWeight | FontWeight |  | The font weight to use for text elements. |
| item.total.label.border | BorderOptions |  | Stroke options for the box border. |
| item.total.label.border.enabled | boolean |  | Whether the associated elements and properties should be used in the chart. |
| item.total.label.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.total.label.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.total.label.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.total.label.cornerRadius | PixelSize |  | Apply rounded corners to the label box. |
| item.total.label.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the border. A number applies uniform padding; an object sets each side. |
| item.total.label.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.total.label.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.total.label.collision | AgChartLabelCollisionOptions |  | Configuration controlling the spacing kept from obstacles and whether a label that cannot be placed clear of every obstacle is kept at its least-overflowing placement or hidden. |
| item.total.label.collision.threshold | PixelSize |  | Collision threshold in pixels. A positive value triggers avoidance strategies when labels are further away, a negative value allows labels to overlap without triggering avoidance. |
| item.total.label.collision.alwaysShow | boolean |  | Whether to keep a colliding label visible when a collision remains after every avoidance strategy has been applied. When `true` the label stays at the best available position; when `false` it is hidden instead. |
| item.total.label.maxWidth | PixelSize |  | Maximum width, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.total.label.maxHeight | PixelSize |  | Maximum height, in pixels, the label may occupy before it is wrapped or truncated to fit. |
| item.total.label.wrapping | 'never' \| 'always' \| 'hyphenate' \| 'on-space' |  | Text wrapping strategy applied when the label is constrained by `maxWidth` or `maxHeight`. - `'always'` will always wrap text to fit within the bounds. - `'hyphenate'` is similar to `'always'`, but inserts a hyphen (`-`) if forced to wrap in the middle of a word. - `'on-space'` will only wrap on white space. If there is no possibility to wrap a line on space and satisfy the bounds, the text will be truncated. - `'never'` disables text wrapping. |
| item.total.label.truncate | boolean |  | Whether to truncate the label with an ellipsis when it does not fit within its bounds. |
| item.total.label.insideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is inside the shape. |
| item.total.label.insideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.total.label.insideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.total.label.insideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.total.label.insideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.total.label.insideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.total.label.insideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.total.label.insideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.total.label.insideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.total.label.insideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.total.label.outsideStyle | AgChartLabelPlacementStyleOptions |  | Style overrides applied only when the label's resolved placement is outside the shape. |
| item.total.label.outsideStyle.cornerRadius | PixelSize |  | Rounded corners applied to the label box for this placement. |
| item.total.label.outsideStyle.padding | PixelSize \| PaddingOptions |  | Distance between the label text and the box edge for this placement. |
| item.total.label.outsideStyle.border | StrokeOptions |  | Border stroke applied to the label box for this placement. |
| item.total.label.outsideStyle.border.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.total.label.outsideStyle.border.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.total.label.outsideStyle.border.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.total.label.outsideStyle.color | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for text elements. A colour string, or a theme-colour reference object. |
| item.total.label.outsideStyle.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.total.label.outsideStyle.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.total.shadow | AgDropShadowOptions |  | Configuration for the shadow used behind the series items. |
| item.total.shadow.enabled | boolean |  | Whether the shadow is visible. |
| item.total.shadow.color | CssColor |  | The colour of the shadow. |
| item.total.shadow.xOffset | PixelSize |  | The horizontal offset in pixels for the shadow. |
| item.total.shadow.yOffset | PixelSize |  | The vertical offset in pixels for the shadow. |
| item.total.shadow.blur | PixelSize |  | The radius of the shadow's blur, given in pixels. |
| item.total.itemStyler | Styler |  | Function used to return formatting for individual Waterfall series item cells, based on the given parameters. |
| item.total.tooltip | AgWaterfallSeriesItemTooltip |  | Series item specific tooltip configuration. |
| item.total.tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| item.total.cornerRadius | PixelSize |  | Apply rounded corners to each bar. |
| item.total.fill | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor \| AgGradientColor \| AgPatternColor \| AgImageFill |  | The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill. |
| item.total.fillOpacity | Opacity |  | The opacity of the fill colour. |
| item.total.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour for the stroke. |
| item.total.strokeWidth | PixelSize |  | The width of the stroke in pixels. |
| item.total.strokeOpacity | Opacity |  | The opacity of the stroke colour. |
| item.total.lineDash | PixelSize[] |  | An array specifying the length in pixels of alternating dashes and gaps. |
| item.total.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| line | AgWaterfallSeriesLineOptions |  | Configuration for the connector lines. |
| line.enabled | boolean |  | Whether the connector lines should be shown. |
| line.stroke | CssColor \| AgColorRef \| AgColorRefMixOnto \| AgColorRefMixOntoColor |  | The colour to use for the connector lines. A colour string, or a theme-colour reference object. |
| line.strokeWidth | PixelSize |  | The width in pixels of the connector lines. |
| line.strokeOpacity | Opacity |  | Opacity of the line stroke. |
| line.lineDash | PixelSize[] |  | Defines how the strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, `[6, 3]` means dashes with a length of `6` pixels with gaps between of `3` pixels. |
| line.lineDashOffset | PixelSize |  | The initial offset of the dashed line in pixels. |
| tooltip | AgSeriesTooltip |  | Series-specific tooltip configuration. |
| tooltip.enabled | boolean |  | Whether to show tooltips when the series are hovered over. |
| tooltip.showArrow | boolean |  | The tooltip arrow is displayed by default, unless the container restricts it or a position offset is provided. To always display the arrow, set `showArrow` to `true`. To remove the arrow, set `showArrow` to `false`. |
| tooltip.range | PixelSize \| 'exact' \| 'nearest' \| 'area' |  | Range from a point that triggers the tooltip to show. Each series type uses its own default; typically this is `'nearest'` for marker-based series and `'exact'` for shape-based series. |
| tooltip.position | AgTooltipPositionOptions |  | The position of the tooltip. Each series type uses its own default; typically this is `'node'` for marker-based series and `'pointer'` for shape-based series. |
| tooltip.position.anchorTo | AgTooltipAnchorTo |  | The element or point to position the tooltip relative to. |
| tooltip.position.placement | AgTooltipPlacement \| AgTooltipPlacement[] |  | The positioning of the tooltip in relation to the element it's anchored to. Multiple values can be provided as a fallback mechanism for the case the tooltip does not fit inside the chart. |
| tooltip.position.xOffset | PixelSize |  | The horizontal offset in pixels for the position of the tooltip. |
| tooltip.position.yOffset | PixelSize |  | The vertical offset in pixels for the position of the tooltip. |
| tooltip.position.offset | PixelSize |  | The distance in pixels between the tooltip and its anchor point, applied in the placement direction.  Default: `12` (`0` when `anchorTo` is `'chart'`). |
| tooltip.interaction | AgSeriesTooltipInteraction |  | Configuration for tooltip interaction. |
| tooltip.interaction.enabled (required) | boolean |  | Set to `true` to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text |
| tooltip.renderer | Renderer |  | Function used to create the content for tooltips. |
| width | PixelSize |  | Fixed width of each bar in the series. |
| widthRatio | Ratio |  | Ratio of the bandwidth (or specified width) to use for the width for each bar in the series. |
| showInMiniChart | boolean |  | Whether to include the series in the Mini Chart. |