Placing IndexLabel above and below datapoint in Line Chart

HTML5 & JS Line Chart - 0 | JSFiddle Sample Code

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",{
    title: {
      text: "Placing IndexLabel above and below datapoint in Line Chart"
    },
    theme: "light2",
    zoomEnabled: true,
    data: [{
      type: "line",
      dataPoints: [
        { x: new Date(2012, 00, 1), y: 450 },
        { x: new Date(2012, 01, 1), y: 424 },
        { x: new Date(2012, 02, 1), y: 520 },
        { x: new Date(2012, 03, 1), y: 460 },
        { x: new Date(2012, 04, 1), y: 450 },
        { x: new Date(2012, 05, 1), y: 500 },
        { x: new Date(2012, 06, 1), y: 480 },
        { x: new Date(2012, 07, 1), y: 480 },
        { x: new Date(2012, 08, 1), y: 410 },
        { x: new Date(2012, 09, 1), y: 500 },
        { x: new Date(2012, 10, 1), y: 480 },
        { x: new Date(2012, 11, 1), y: 510 }
      ]
    }]
  });

  chart.render();
  
  var indexLabelSeries = {
    type: "scatter",
    markerSize: 0,
    highlightEnabled: false,
    toolTipContent: null,
    dataPoints: []
  };

  for(var i=0; i<chart.data[0].dataPoints.length; i++) {
    var dp = chart.data[0].dataPoints[i];
    lastDp = i > 0 ? chart.data[0].dataPoints[i-1].y : chart.data[0].dataPoints[i].y;
    labelPlacement = lastDp > chart.data[0].dataPoints[i].y ? "below": "above";
    indexLabelSeries.dataPoints.push({
      x: dp.x,
      y: chart.axisY[0].convertPixelToValue(chart.axisY[0].convertValueToPixel(dp.y) + (chart.data[0].markerSize + (labelPlacement == "below" ? -42 : -16 )) * (labelPlacement == "below" ? -1 : 1) ),
      indexLabel: "" + (chart.data[0].dataPoints[i].y - lastDp)
    });
  }

  chart.options.data.push(indexLabelSeries)
  chart.render();

}