Charts / Series Types / Waterfall
material theme

Waterfall

Waterfall charts are categorical charts which display the cumulative effect of sequentially introduced positive or negative values.

Basic Usage

The following example demonstrates the Waterfall chart in action.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Chart,
    ChartTitle,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesLabels
} from '@progress/kendo-react-charts';

import data from './waterfall-data.json';

const pointColor = (point) => {
    let summary = point.dataItem.summary;

    if (summary) {
        return summary === 'total' ? '#555' : 'gray';
    }

    if (point.value > 0) {
        return 'green';
    } else {
        return 'red';
    }
};

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Cash flow" />
        <ChartSeries>
            <ChartSeriesItem
                type="waterfall"
                data={data}
                color={pointColor}
                field="amount"
                categoryField="period"
                summaryField="summary"
            >
                <ChartSeriesLabels format="C0" position="insideEnd" />
            </ChartSeriesItem>
        </ChartSeries>
        <ChartValueAxis>
            <ChartValueAxisItem title={{ format: 'C0' }} />
        </ChartValueAxis>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
 /