HTML5 Step Area Chart built using CanvasJS

HTML5 Step Area Chart built using CanvasJS

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: 'Maandoverzicht 2016'
  },
  toolTip: {
    shared: true,
    content: function(e) {
      var str = '';
      var total = 0;
      var str3;
      var str2;

      for (var i = 0; i < e.entries.length; i++) {
        var str1 = "<span style= 'color:" + e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: &euro;<strong>" + e.entries[i].dataPoint.y.toFixed(2) + "</strong><br/>";
        total = e.entries[i].dataPoint.y + total;
        str = str.concat(str1);
      }

      str2 = "<span style = 'color:DodgerBlue; '><strong>" + e.entries[0].dataPoint.label + "</strong></span><br/>";
      total = Math.round(total * 100) / 100;
      str3 = "<span style = 'color:Tomato '>Total:</span><strong> &euro;" + total + "</strong><br/>";

      return (str2.concat(str)).concat(str3);
    }
  },
  axisY: {
    labelFormatter: function(e) {
      var str = CanvasJS.formatNumber(e.value, "#,##0");

      while (str.indexOf(',') != -1) {
        str = str.replace(',', '.');
      }

      return '€' + str;
    },
    includeZero: false
  },
  data: [{
    type: 'stackedColumn',
    showInLegend: true,
    cursor: 'pointer',
    yValueFormatString: '&euro; #,###.00',
    name: 'Actiehotels.nl',
    dataPoints: [{
      "month_index": 1,
      "label": "januari",
      "y": 354.11,
      "0": true,
      "cursor": "pointer"
    }, {
      "month_index": 2,
      "label": "februari",
      "y": 606.75,
      "0": true
    }, {
      "month_index": 3,
      "label": "maart",
      "y": 469.74,
      "0": true
    }, {
      "month_index": 4,
      "label": "april",
      "y": 266.2,
      "0": true
    }, {
      "month_index": 5,
      "label": "mei",
      "y": 0,
      "0": true
    }, {
      "month_index": 6,
      "label": "juni",
      "y": 0,
      "0": true
    }, {
      "month_index": 7,
      "label": "juli",
      "y": 0,
      "0": true
    }, {
      "month_index": 8,
 ...