Position Custom DOM Element as Indexlabel - CanvasJS JavaScript Charts

Position Custom DOM Element as Indexlabel - 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>

CSS

#indexlabel {
  color: red;
  position: absolute;
  font-size: 16px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  		text: "Position External DOM as Indexlabel"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { 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 }
      ]
    }					
  ]
});

chart.render();

var indexLabels = [];
addIndexLabels(chart);

function addIndexLabels(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
      indexLabels.push(document.createElement("p"));
      indexLabels[i].setAttribute("id", "indexlabel");
      indexLabels[i].innerHTML = chart.data[0].dataPoints[i].y;
      document.getElementById("chartContainer").appendChild(indexLabels[i]);
  }
  positionIndexLabels(chart);
}

function positionIndexLabels(chart){
		for(var i = 0; i < indexLabels.length; i++){
				indexLabels[i].style.top = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[i].y) - (indexLabels[i].clientHeight / 2)  + "px";
      	indexLabels[i].style.left = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x) + "px";
  	}
}

window.onresize = function(event) {
    positionIndexLabels(chart)
}