jQuery Stacked Bar Charts & Graphs

Download jQuery Chart Samples

jQuery 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 jQuery Stacked Bar Chart along with HTML 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);
}

Chart Customizations

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