jQuery Stacked Column 100% Charts & Graphs

Download jQuery Chart Samples

jQuery Stacked Column 100% Charts, also referred to as Vertical Stacked Bar 100% Charts are similar to Stacked Column Charts except that the height of individual bars are calculated as a percentage of the total sum. Given example shows simple jQuery Stacked Column 100% Chart along with 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: "Sales of ACME based on Sales-Channels"
	},
	axisY: {
		suffix: "%"
	},
	toolTip: {
		shared: true,
		reversed: true
	},
	legend: {
		reversed: true,
		verticalAlign: "center",
		horizontalAlign: "right"
	},
	data: [
	{
		type: "stackedColumn100",
		name: "WholeSale",
		showInLegend: true,
		yValueFormatString: "#,##0"%"",
		dataPoints: [
		{ label: "Q1", y: 44 },
		{ label: "Q2", y: 88 },
		{ label: "Q3", y: 65 },
		{ label: "Q4", y: 69 }
		]
	},
	{
		type: "stackedColumn100",
		name: "Retail",
		showInLegend: true,
		yValueFormatString: "#,##0"%"",
		dataPoints: [
		{ label: "Q1", y: 48 },
		{ label: "Q2", y: 29 },
		{ label: "Q3", y: 73 },
		{ label: "Q4", y: 99 }
		]
	},
	{
		type: "stackedColumn100",
		name: "Inside Sales",
		showInLegend: true,
		yValueFormatString: "#,##0"%"",
		dataPoints: [
		{ label: "Q1", y: 19 },
		{ label: "Q2", y: 41 },
		{ label: "Q3", y: 5 },
		{ label: "Q4", y: 39 }
		]
	},
	{
		type: "stackedColumn100",
		name: "Mail Order",
		showInLegend: true,
		yValueFormatString: "#,##0"%"",
		dataPoints: [
		{ label: "Q1", y: 20 },
		{ label: "Q2", y: 100 },
		{ label: "Q3", y: 7 },
		{ label: "Q4", y: 43 }
		]
	}
	]
};

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

Chart Customizations

horizontalAlign & verticalAlign can be used to customize the placement of legends in the chart. Some other frequently used customization options are shared(toolTip), color, etc.

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