Stacked Step Area Chart using Step Area Chart - CanvasJS JavaScript Charts

Stacked Step Area Chart using Step 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", {
  toolTip:{
    shared: true,
    contentFormatter: function (e) {
      var content = " ";
      content += e.entries[0].dataPoint.x + "</br>";
      for (var i = 0; i < e.entries.length; i++) {
        if(e.entries[i].dataPoint.hasOwnProperty('actualYValue')){
          content += "<span style='color: " + e.entries[i].dataSeries.color + ";'>" + e.entries[i].dataSeries.name + ":</span> "+ e.entries[i].dataPoint.actualYValue;
          content += "<br/>";
        }
        else{
          content += "<span style='color: " + e.entries[i].dataSeries.color + ";'>" + e.entries[i].dataSeries.name + ":</span> "+ e.entries[i].dataPoint.y;
          content += "<br/>";
        }
      }
      return content;
    }
  },
  data: [
    {
      type: "stepArea",
      name: "stacked stepAreaChart 1",
      dataPoints: [
        { x: 1, y: 4.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: "line",
      name: "lineChart",
      dataPoints: [
        { x: 1, y: 7.00 }, 
        { x: 2, y: 28.50 }, 
        { x: 3, y: 45.00 },
        { x: 4, y: 31.50 },
        { x: 5, y: 16.75 },
        { x: 6, y: 39.30 },
        { x: 7, y: 32.80 },
        { x: 8, y: 57.50 },
        { x: 9, y: 52.75 },
        { x: 10, y: 9.30 },
      ]
    },
    {
      type: "stepArea",
      name: "stacked stepAreaChart 2",
      dataPoints: [
        { x: 1, y: 12.00 },
        { x: 2, y: 22.00 },
        { 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 },
      ]
    }
  ]
});

createStackedStepAreaChart(chart);
chart.render();

function...