JavaScript Waterfall Charts & Graphs

Download JavaScript Chart Samples

JavaScript Waterfall Charts are useful for understanding the cumulative effect of positive and negative changes to an initial value and are mostly used as Financial Charts. The initial and final values start from X axis, while the intermediate values(columns) are floating. This is why Waterfall Graphs are known as Flying Brick Charts. It is also referred to as Bridge Chart in finance. Charts are interactive & responsive across all devices. Given example shows JavaScript Waterfall Chart along with source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light1", // "light1", "ligh2", "dark1", "dark2"
	animationEnabled: true,
	title: {
		text: "Company Finance"
	},
	axisY: {
		title: "Amount (in USD)",
		prefix: "$",
		suffix: "k",
		lineThickness: 0,
		includeZero: true
	},
	data: [{
		type: "waterfall",
		indexLabel: "{y}",
		indexLabelFontColor: "#EEEEEE",
		indexLabelPlacement: "inside",
		yValueFormatString: "#,##0k",
		dataPoints: [
			{ label: "Sales",  y: 1273 },
			{ label: "Service", y: 623 },
			{ label: "Total Revenue", isIntermediateSum: true},
			{ label: "Research", y: -150 },
			{ label: "Marketing",  y: -226 },
			{ label: "Salaries", y: -632 },
			{ label: "Operating Income", isCumulativeSum: true },
			{ label: "Taxes",  y: -264 },
			{ label: "Net Income",  isCumulativeSum: true }
		]
	}]
});
chart.render();

}

Chart Customizations

You can use risingColor and fallingColor property to set custom colors for columns representing positive and negative changes. Some other common customizations include: showInLegend, color, fillOpacity, etc.