Position Custom Text / DOM on top of Chart - CanvasJS JavaScript Charts

Position Custom Text / DOM on top of Chart - CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme2",//theme1      	
  data: [              
    {			
      type: "column",
      dataPoints: [
        { label: "apple",  y: 18  },
        { label: "orange", y: 15  },
        { label: "banana", y: 25  },
        { label: "mango",  y: 30  },
        { label: "grape",  y: 28  }
      ]
    }
  ]
});

chart.render();

addText("Apple");

function addText(text){
  var span = document.createElement("span");
  span.innerHTML = text;  
  document.body.appendChild(span);  
  span.style.cssText = "position: absolute; top: 200px; left: 10%; font-size: 25px";
}