Waterfall in JavaScript Chart control

08 May 2023 / 2 minutes to read

Waterfall Chart

Waterfall chart helps to understand the cumulative effect of the sequentially introduced positive and negative values. To render a Waterfall series, use series type as Waterfall and inject WaterfallSeries module using Chart.Inject(WaterfallSeries) method. intermediateSumIndexes property of waterfall is used to represent the in between sum values and sumIndexes is used to represent the cumulative sum values.

Source

Preview

index.ts

index.html

import { Chart, WaterfallSeries, Category, DataLabel } from '@syncfusion/ej2-charts';
Chart.Inject(WaterfallSeries, Category, DataLabel);
let chartData: any[] = [
    { x: 'Income', y: 4711 }, { x: 'Sales', y: -1015 },
    { x: 'Development', y: -688 },
    { x: 'Revenue', y: 1030 }, { x: 'Balance' },
    { x: 'Administrative', y: -780 },
    { x: 'Expense', y: -361 }, { x: 'Tax', y: -695 },
    { x: 'Net Profit' }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    series: [
        {
            dataSource: chartData,
            xName: 'x', yName: 'y', intermediateSumIndexes: [4], sumIndexes: [8],
            //Series type as Waterfall
            type: 'Waterfall',
        }
    ],
}, '#element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Series customization

The negative changes of waterfall charts are represented by using negativeFillColor and the summary changes are represented by using summaryFillColor properties respectively. By default, the negativeFillColor is green and the summaryFillColor is black.