Waterfall Chart in EJ2 JavaScript control

28 Sep 20238 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.

var chartData = [
    { 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' }
];
var chart = new ej.charts.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://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.

var chartData = [
     { 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'}
];
var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category',
        majorGridLines: {width: 0},
    },
    primaryYAxis:
    {
        labelFormat: '${value}M',
        minimum: 0, maximum: 5500, interval: 500,
        majorGridLines: {width: 0},
        lineStyle: { width: 0},
        majorTickLines: { width: 0}
    },
    series:[
        {
            dataSource: chartData, width:2,
            xName: 'x', yName:'y', intermediateSumIndexes: [4], sumIndexes: [8],
            name: 'USA',columnWidth: 0.6,
            //Series type as Waterfall
            type: 'Waterfall', animation: { enable: true },
             marker: {
                dataLabel: { visible: true, position: 'Outer' }
            }, summaryFillColor: 'red',
            negativeFillColor: 'green',
            connector: { color: 'blue', width: 1.5 },
        }
    ],
    title: 'Company Revenue and Profit'
}, '#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://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also