jQuery Stacked Bar 100% Charts & Graphs

Download jQuery Chart Samples

jQuery Stacked Bar 100% Chart is similar to Stacked Bar except that their height is rendered as a percentage of total value at any given point. Given example shows simple jQuery Stacked Bar 100% Chart along with HTML5 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,
	theme: "light2", //"light1", "dark1", "dark2"
	title:{
		text: "Division of Products Sold in 2nd Quarter"             
	},
	axisY:{
		interval: 10,
		suffix: "%"
	},
	toolTip:{
		shared: true
	},
	data:[{
		type: "stackedBar100",
		toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
		showInLegend: true, 
		name: "April",
		dataPoints: [
			{ y: 550, label: "Water Filter" },
			{ y: 450, label: "Modern Chair" },
			{ y: 70, label: "VOIP Phone" },
			{ y: 200, label: "Microwave" },
			{ y: 70, label: "Water Filter" },
			{ y: 324, label: "Expresso Machine" },
			{ y: 300, label: "Lobby Chair" }
		]
	},
	{
		type: "stackedBar100",
		toolTipContent: "<b>{name}:</b> {y} (#percent%)",
		showInLegend: true, 
		name: "May",
		dataPoints: [
			{ y: 450, label: "Water Filter" },
			{ y: 550, label: "Modern Chair" },
			{ y: 270, label: "VOIP Phone" },
			{ y: 400, label: "Microwave" },
			{ y: 270, label: "Water Filter" },
			{ y: 524, label: "Expresso Machine" },
			{ y: 500, label: "Lobby Chair" }
		]
	}, 
	{
		type: "stackedBar100",
		toolTipContent: "<b>{name}:</b> {y} (#percent%)",
		showInLegend: true, 
		name: "June",
		dataPoints: [
			{ y: 350, label: "Water Filter" },
			{ y: 660, label: "Modern Chair" },
			{ y: 265, label: "VOIP Phone" },
			{ y: 271, label: "Microwave" },
			{ y: 125, label: "Water Filter" },
			{ y: 360, label: "Expresso Machine" },
			{ y: 340, label: "Lobby Chair" }
		]
	}]
};

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

Chart Customizations

You can use showInLegend property to enable legends for the data series. Other related customization options are dataPointWidth, shared (toolTip), etc.

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