Stacked Step Area Chart using Step Area Chart (Workaround) | CanvasJS JavaScript Charts

Stacked Step Area Chart using Step Area Chart (Workaround) | 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 dataSet = [[     //dataSet array will contain the respective dataSeries
  { x: 10, y: 71 },
  { x: 20, y: 55 },
  { x: 30, y: 50 },
  { x: 40, y: 65 },
  { x: 50, y: 95 },
  { x: 60, y: 68 },
  { x: 70, y: 28 },
  { x: 80, y: 34 },
  { x: 90, y: 14 }
],[
  { x: 10, y: 81 },
  { x: 20, y: 35 },
  { x: 30, y: 20 },
  { x: 40, y: 45 },
  { x: 50, y: 55 },
  { x: 60, y: 68 },
  { x: 70, y: 38 },
  { x: 80, y: 54 },
  { x: 90, y: 24 }
],[
  { x: 10, y: 41 },
  { x: 20, y: 25 },
  { x: 30, y: 10 },
  { x: 40, y: 35 },
  { x: 50, y: 45 },
  { x: 60, y: 38 },
  { x: 70, y: 18 },
  { x: 80, y: 34 },
  { x: 90, y: 14 }
]];

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Stacked Step Area Chart"
  },
  toolTip:{
    shared: true,
    contentFormatter: function (e) {
      var content = " ";
      content += e.entries[0].dataPoint.x + "</br>";
      for (var i = 0; i < e.entries.length; i++) {
        content += "<span style='color: " + e.entries[i].dataSeries.color + ";'>" + e.entries[i].dataSeries.name + ":</span> "+ e.entries[i].dataPoint.actualYValue;
        content += "<br/>";
      }
      return content;
    }
  },
  data: []
});

createStackedStepAreaChart(chart);
chart.render();

function createStackedStepAreaChart (chart) {
  var k = 0, yTotal = 0;

  for(var i = 0; i <= dataSet.length; i++) {
    chart.options.data.push({
      type: "stepArea",
      dataPoints: []
    });
  }

  for(var i = 0; i < dataSet.length; i++) {
    for(var j = 0; j < dataSet[i].length; j++) { 
      k = 0;
      yTotal = 0;  
      while(k <= i) {
        yTotal = yTotal + dataSet[k][j].y; //summing up the y-values from the previous dataSeries
        k++;
      }
      chart.options.data[(dataSet.length - 1) - i].dataPoints.push({ x:dataSet[i][j].x, y: yTotal, actualYValue: dataSet[i][j].y});
    }
  }  
}