Stacked Line Chart using Stacked Area Chart - CanvasJS JavaScript Charts

Stacked Line Chart using Stacked Area 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", {
	title: {
  		text:"Stacked Line Chart"
  },
	data: [{
		type: "stackedArea",
    fillOpacity: 0,
		dataPoints: [
			 { x: 1, y: 22.00 },
       { x: 2, y: 38.50 }, 
       { 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: "stackedArea",
    fillOpacity: 0,
		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();