jQuery Stacked Bar Charts & Graphs

Download jQuery Code Samples

Stacked Bar Chart is formed by stacking multiple data-series, one on top of the other and is useful to compare contribution of two or more series with the total. Given example shows simple Stacked Bar Chart along with HTML / jQuery 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 = {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Cost Of Pancake Ingredients"
	},
	axisY2:{
		prefix: "$",
		lineThickness: 0				
	},
	toolTip: {
		shared: true
	},
	legend:{
		verticalAlign: "top",
		horizontalAlign: "center"
	},
	data: [
	{     
		type: "stackedBar",
		showInLegend: true,
		name: "Butter (500gms)",
		axisYType: "secondary",
		color: "#7E8F74",
		dataPoints: [
			{ y: 3, label: "India" },
			{ y: 5, label: "US" },
			{ y: 3, label: "Germany" },
			{ y: 6, label: "Brazil" },
			{ y: 7, label: "China" },
			{ y: 5, label: "Australia" },
			{ y: 5, label: "France" },
			{ y: 7, label: "Italy" },
			{ y: 9, label: "Singapore" },
			{ y: 8, label: "Switzerland" },
			{ y: 12, label: "Japan" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "Flour (1kg)",
		axisYType: "secondary",
		color: "#F0D6A7",
		dataPoints: [
			{ y: .5, label: "India" },
			{ y: 1.5, label: "US" },
			{ y: 1, label: "Germany" },
			{ y: 2, label: "Brazil" },
			{ y: 2, label: "China" },
			{ y: 2.5, label: "Australia" },
			{ y: 1.5, label: "France" },
			{ y: 1, label: "Italy" },
			{ y: 2, label: "Singapore" },
			{ y: 2, label: "Switzerland" },
			{ y: 3, label: "Japan" }
		]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "Milk (2l)",
		axisYType: "secondary",
		color: "#EBB88A",
		dataPoints: [
			{ y: 2, label: "India" },
			{ y: 3, label: "US" },
			{ y: 3, label: "Germany" },
			{ y: 3, label: "Brazil" },
			{ y: 4, label: "China" },
			{ y: 3, label: "Australia" },
			{ y: 4.5, label: "France" },
			{ y: 4.5, label: "Italy" },
			{ y: 6, label: "Singapore" },
			{ y: 3, label: "Switzerland" },
			{ y: 6, label: "Japan" }
			]
	},
	{
		type: "stackedBar",
		showInLegend: true,
		name: "Eggs (20)",
		axisYType: "secondary",
		color:"#DB9079",
		indexLabel: "$#total",
		dataPoints: [
			{ y: 2, label: "India" },
			{ y: 3, label: "US" },
			{ y: 6, label: "Germany"},
			{ y: 4, label: "Brazil" },
			{ y: 4, label: "China" },
			{ y: 8, label: "Australia" },
			{ y: 8, label: "France" },
			{ y: 8, label: "Italy" },
			{ y: 4, label: "Singapore" },
			{ y: 11, label: "Switzerland" },
			{ y: 6, label: "Japan" }
		]
	}
	]
};

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

Related Customization

You can use dataPointWidth to control the width of bar. Some other frequently used customization options are shared(in toolTip), showInLegend, color, etc.

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