React ChartsWaterfall Series

Enterprise

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

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

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

The xKey defines categories for the Category Axis, and the yKey supplies numerical values for the Number Axis.

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 and Subtotal values are added to the totals array within the series options object.

series: [
    {
        type: 'waterfall',
        xKey: 'financials',
        yKey: 'amount',
        totals: [
            { totalType: 'subtotal', index: 4, axisLabel: 'Total Revenue' },
            { totalType: 'subtotal', index: 9, axisLabel: 'Total Expenditure' },
            { totalType: 'total', index: 9, axisLabel: '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 used to provide a unique label, used as a category on the Category Axis.

Customisation

Series Items

Series items are customised via the item configuration object.

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

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

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

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

Horizontal Waterfall

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

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

When the direction is 'horizontal' the xKey will define categories on the y-axis, while the yKey will represent numerical values along the x-axis.

Getting started

Core features

Specialised Charts

Series

Gauges