JavaScript Stacked Area 100% Charts & Graphs

Download JavaScript 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. Stacked Area 100% Charts are also formed by stacking multiple data-series, one on top of the other. Charts are interactive, support animation, zooming, panning & exporting as image. Given example shows JavaScript Stacked Area 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 () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Products Sold by XYZ Ltd. in 2016"
	},
	axisX:{
		title: "Seasons",
		minimum: -0.02,
		maximum: 3.02
	},
	axisY:{
		title:"Sales"
	},
	toolTip:{
		shared: true
	},
	data: [{
		type: "stackedArea100",
		name: "Mosquito Repellents",
		showInLegend: "true",
		dataPoints: [
			{ y: 83450 , label: "Spring" },
			{ y: 51240, label: "Summer" },
			{ y: 64120, label: "Autumn" },
			{ y: 71450, label: "Fall" }
		]
	},
	{
		type: "stackedArea100",
		name: "Liquid Soap",
		showInLegend: "true",
		dataPoints: [
			{ y: 20140 , label: "Spring" },
			{ y: 30170, label: "Summer" },
			{ y: 24410, label: "Autumn" },
			{ y: 38120, label: "Fall" }
		]
	},
	{
		type: "stackedArea100",
		name: "Napkins",
		showInLegend: "true",
		dataPoints: [
			{ y: 45120 , label: "Spring" },
			{ y: 50350, label: "Summer" },
			{ y: 48410, label: "Autumn" },
			{ y: 53120, label: "Fall" }
		]
	},
	{
		type: "stackedArea100",
		name: "Sanitizer",
		showInLegend: "true",
		dataPoints: [
			{ y: 11050, label: "Spring" },
			{ y: 16100, label: "Summer" },
			{ y: 15010, label: "Autumn" },
			{ y: 23100, label: "Fall" }
		]
	}]
});
chart.render();

}

Chart Customizations

The legend markers can be changed using the markerType property. Other commonly used customizations options are markerSize, markerColor, markerBorderColor, etc.