jQuery Stacked Area 100% Charts & Graphs

Download jQuery Chart Samples

Stacked Area 100% is similar to Stacked Area Chart except that areas are rendered as a percentage of total value at any given point. Given example shows simple jQuery Stacked Area 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 () {

var options = {
	theme: "light2",
	animationEnabled: true,
	title:{
		text: "Quaterly Sales by Region - 2016"
	},
	axisY: {
		suffix: "%"
    },
	toolTip: {
		shared: true
	},
	data: [
	{        
		type: "stackedArea100",
		name: "East",
		yValueFormatString: "#0.##\"%\"",
		showInLegend: "true",
		dataPoints: [
			{ label: "Q1", y: 21 },
			{ label: "Q2", y: 26 },
			{ label: "Q3", y: 23 },
			{ label: "Q4", y: 30 }
		]
	},
	{        
		type: "stackedArea100",
		name: "West",
		yValueFormatString: "#0.##\"%\"",
		showInLegend: "true",
		dataPoints: [
			{ label: "Q1", y: 20 },
			{ label: "Q2", y: 26 },
			{ label: "Q3", y: 23 },
			{ label: "Q4", y: 31 }
		]
	},
	{        
		type: "stackedArea100",
		name: "Central",
		yValueFormatString: "#0.##\"%\"",
		showInLegend: "true",
		dataPoints: [
			{ label: "Q1", y: 20 },
			{ label: "Q2", y: 26 },
			{ label: "Q3", y: 25 },
			{ label: "Q4", y: 30 }
		]
	},
	{        
		type: "stackedArea100",
		name: "South",
		yValueFormatString: "#0.##\"%\"",
		showInLegend: "true",
		dataPoints: [
			{ label: "Q1", y: 18 },
			{ label: "Q2", y: 25 },
			{ label: "Q3", y: 30 },
			{ label: "Q4", y: 26 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

You can customize the color of legend markers using legendMarkerColor property. Also, the type of the marker can be changed by setting the legendMarkerType. Other related customizations include legendMarkerBorderColor, etc.

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