Stacked stepArea chart- CanvasJS JavaScript Charts

Stacked stepArea chart- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{        
	data: [
  {
  	//Add corresponding 'y' value of next dataSeries to 'y' of this dataSeries
		type: "stepArea",
		dataPoints: [
			 { x: 1, y: 22.00 }, //12.00 + 10.00
       { x: 2, y: 38.50 }, //18.50 + 20.00
       { x: 3, y: 55.00 },
       { x: 4, y: 41.50 },
       { x: 5, y: 26.75 },
       { x: 6, y: 49.30 },
       { x: 7, y: 42.80 },
       { x: 8, y: 67.50 },
       { x: 9, y: 62.75 },
       { x: 10, y: 59.30 },
		]
	},
  {
		type: "stepArea",
		dataPoints: [
			 { x: 1, y: 12.00 },
       { x: 2, y: 18.50 },
       { x: 3, y: 15.00 },
       { x: 4, y: 11.50 },
       { x: 5, y: 16.75 },
       { x: 6, y: 19.30 },
       { x: 7, y: 22.80 },
       { x: 8, y: 27.50 },
       { x: 9, y: 22.75 },
       { x: 10, y: 19.30 },
		]
	}
	]
});

chart.render();