stacked Line Chart - CanvasJS JavaScript Charts

stacked Line Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://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"
  },
	toolTip: {
        borderColor: "black"   //change color 
  },
	data: [
  {
  	//Add corresponding 'y' value of next dataSeries to 'y' of this dataSeries
		type: "stackedArea",
    color: "transparent",
    lineColor: "#4661EE",
    markerColor:"#4661EE",
    toolTipContent: "<span style='\"'color: {lineColor};'\"'>{x}</span>: {y}",
		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",
    color: "transparent",
    lineColor: "#EC5657",
    markerColor:"#EC5657",
    toolTipContent: "<span style='\"'color: {lineColor};'\"'>{x}</span>: {y}",
		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();