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/21.2.3/dist/ej2.min.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>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/21.2.3/dist/ej2.min.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>