jQuery Stacked Bar Charts & Graphs

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.