jQuery Stacked Area Charts & Graphs

Download jQuery Chart Samples

Stacked Area 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 Area Chart along with HTML 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 = {
	animationEnabled: true,
	title:{
		text: "Sales at Different Regions"
	},
	axisY :{
		valueFormatString: "#0,.",
		prefix: "$",
		suffix: "k",
		title: "Sales"
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "stackedArea",
		showInLegend: true,
		name: "Central",
		xValueFormatString: "MMM YYYY",
		yValueFormatString: "$#,###",
		dataPoints: [
			{ x: new Date(2017, 0), y: 90000 },
			{ x: new Date(2017, 1), y: 83000 },
			{ x: new Date(2017, 2), y: 97000 },
			{ x: new Date(2017, 3), y: 175000 },
			{ x: new Date(2017, 4), y: 148000 },
			{ x: new Date(2017, 5), y: 93000 },
			{ x: new Date(2017, 6), y: 131000 },
			{ x: new Date(2017, 7), y: 142000 },
			{ x: new Date(2017, 8), y: 156000 },
			{ x: new Date(2017, 9), y: 134000 },
			{ x: new Date(2017, 10), y: 115000 },
			{ x: new Date(2017, 11), y: 98000 }
		]
	}, {
		type: "stackedArea",  
		name: "East",
		showInLegend: true,
		yValueFormatString: "$#,###",
		dataPoints: [
			{ x: new Date(2017, 0), y: 93000 },
			{ x: new Date(2017, 1), y: 99000 },
			{ x: new Date(2017, 2), y: 107000 },
			{ x: new Date(2017, 3), y: 110500 },
			{ x: new Date(2017, 4), y: 114000 },
			{ x: new Date(2017, 5), y: 133000 },
			{ x: new Date(2017, 6), y: 205000 },
			{ x: new Date(2017, 7), y: 192000 },
			{ x: new Date(2017, 8), y: 156000 },
			{ x: new Date(2017, 9), y: 114000 },
			{ x: new Date(2017, 10), y: 99000 },
			{ x: new Date(2017, 11), y: 135000 }
		]
	}, {
		type: "stackedArea",  
		name: "South",
		showInLegend: true,
		yValueFormatString: "$#,###",
		dataPoints: [
			{ x: new Date(2017, 0), y: 123000 },
			{ x: new Date(2017, 1), y: 117000 },
			{ x: new Date(2017, 2), y: 107000 },
			{ x: new Date(2017, 3), y: 98000 },
			{ x: new Date(2017, 4), y: 94000 },
			{ x: new Date(2017, 5), y: 103000 },
			{ x: new Date(2017, 6), y: 121000 },
			{ x: new Date(2017, 7), y: 132000 },
			{ x: new Date(2017, 8), y: 99700 },
			{ x: new Date(2017, 9), y: 104000 },
			{ x: new Date(2017, 10), y: 137000 },
			{ x: new Date(2017, 11), y: 145000 }
		]
	}, {
		type: "stackedArea",  
		name: "West",
		//indexLabel: "#total",
		yValueFormatString: "$#,###",
		showInLegend: true,
		dataPoints: [
			{ x: new Date(2017, 0), y: 78000 },
			{ x: new Date(2017, 1), y: 83000 },
			{ x: new Date(2017, 2), y: 67000 },
			{ x: new Date(2017, 3), y: 88600 },
			{ x: new Date(2017, 4), y: 94000 },
			{ x: new Date(2017, 5), y: 73900 },
			{ x: new Date(2017, 6), y: 31000 },
			{ x: new Date(2017, 7), y: 42000 },
			{ x: new Date(2017, 8), y: 56000 },
			{ x: new Date(2017, 9), y: 64000 },
			{ x: new Date(2017, 10), y: 81000 },
			{ x: new Date(2017, 11), y: 105000 }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}

Chart Customizations

The size and type of markers can be customized using markerSize and markerType property. Some other commonly used customization options are fillOpacity, color, lineThickness, etc.

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