Stacked Spline Area chart (customized from splineArea)- CanvasJS JavaScript Charts

Stacked Spline Area chart (customized from splineArea)- 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",
{ 
	toolTip: {
    contentFormatter: function(e){    
    	for (var i = 0; i < e.entries.length; i++){
        if (e.entries[i].dataSeries.name === "Top") {
          return ( e.chart.data[0].dataPoints[e.entries[i].index].y - e.chart.data[1].dataPoints[e.entries[i].index].y);   
        }
        else {
        	return e.entries[i].dataPoint.y;  	
        }
      }
    },
  },
	data: [
  {
    type: "splineArea",
    name: "Top",
    dataPoints: [
      {x: new Date(1992,0), y: 23},     
      {x: new Date(1993,0), y: 45},     
      {x: new Date(1994,0), y: 63},     
      {x: new Date(1995,0), y: 18},     
      {x: new Date(1996,0), y: 32},     
      {x: new Date(1997,0), y: 53},     
      {x: new Date(1998,0), y: 12},     
      {x: new Date(1999,0), y: 53},     
      {x: new Date(2000,0), y: 32},     
    ]
  },
	{
		type: "splineArea",
    name: "Bottom",
    dataPoints: [
      {x: new Date(1992,0), y: 42},     
      {x: new Date(1993,0), y: 64},     
      {x: new Date(1994,0), y: 12},     
      {x: new Date(1995,0), y: 65},     
      {x: new Date(1996,0), y: 23},     
      {x: new Date(1997,0), y: 67},     
      {x: new Date(1998,0), y: 45},     
      {x: new Date(1999,0), y: 52},     
      {x: new Date(2000,0), y: 74},     
    ]
  } 
	]
});
updateValues();
chart.render();

function updateValues() {
	for (var i = 0; i < chart.options.data.length; i++) {
  	for (var j = i; j < chart.options.data[i].dataPoints.length; j++) {
    	if(i+1 < chart.options.data.length)
    	chart.options.data[i].dataPoints[j].y += chart.options.data[i+1].dataPoints[j].y ;
    }
  }
}