jQuery Stacked Column Charts & Graphs

Download jQuery Chart Samples

jQuery Stacked Column Chart, also referred to as Vertical Stacked Bar Chart is formed by stacking multiple data-series, one on top of the other. The given example shows simple jQuery Stacked Column Chart along with HTML source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
	animationEnabled: true,
	title:{
		text: "Coal Reserves of Countries"   
	},
	axisY:{
		title:"Coal (mn tonnes)"
	},
	toolTip: {
		shared: true,
		reversed: true
	},
	data: [{
		type: "stackedColumn",
		name: "Anthracite and Bituminous",
		showInLegend: "true",
		yValueFormatString: "#,##0mn tonnes",
		dataPoints: [
			{ y: 111338 , label: "USA" },
			{ y: 49088, label: "Russia" },
			{ y: 62200, label: "China" },
			{ y: 90085, label: "India" },
			{ y: 38600, label: "Australia" },
			{ y: 48750, label: "SA" }
		]
	},
	{
		type: "stackedColumn",
		name: "SubBituminous and Lignite",
		showInLegend: "true",
		yValueFormatString: "#,##0mn tonnes",
		dataPoints: [
			{ y: 135305 , label: "USA" },
			{ y: 107922, label: "Russia" },
			{ y: 52300, label: "China" },
			{ y: 3360, label: "India" },
			{ y: 39900, label: "Australia" },
			{ y: 0, label: "SA" }
		]
	}]
};

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

Chart Customizations

You can show common toolTip for all the data series in the chart by setting shared property of toolTip to true. Further customizations include setting color, showInLegend, dataPointWidth, etc.

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