jQuery Waterfall Charts with Custom Colors

Download jQuery Chart Samples

jQuery 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. The given example shows simple jQuery Waterfall Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
	theme: "light2", //"light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	title:{
		text: "Income Statement, 2016"
	},
	axisX:{
		labelFontSize: 12,
		labelMaxWidth: 75
	},
	axisY: {
		prefix: "$"
	},	
	data: [{
		type: "waterfall",
		yValueFormatString: "$#,##0",
		risingColor: "#50cdc8",
		fallingColor: "#ff6969",
		lineColor: "#222222",
		dataPoints: [
			{ label: "Net Revenue", y: 280631 },
			{ label: "Inventory", y: -115000 },
			{ label: "Merchandise", y: -8900 },
			{ label: "Other Sales Cost", y: -28990 },
			{ label: "Gross Income", isIntermediateSum: true, color: "#55646e" },
			{ label: "Staff", y: -24500 },
			{ label: "Marketing", y: -5000 },
			{ label: "Other Facilities", y: -35100 },
			{ label: "Operating Income", isCumulativeSum: true, color: "#55646e" },
			{ label: "Taxes", y: -11000 },
			{ label: "Net Income", isCumulativeSum: true}
		]
	}]
};

$("#chartContainer").CanvasJSChart(options);
}

Chart Customizations

risingColor & fallingColor properties can be used in waterfall chart for showing rise and fall in values. Some other common customizations include isIntermediateSum, isCumulativeSum, color, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial