Add Image on mouse click on the chart - CanvasJS JavaScript Charts

Add Image on mouse click on the 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>

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.imageToolTip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.imageToolTip:hover .tooltiptext {
  visibility: visible;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
	title:{
  	text: "Add Image on Mouse Click"
  },
  data: [
    {
      type: "splineArea",      
      dataPoints: [
        { x: 10, y: 5 }, 
        { x: 20, y: 9 }, 
        { x: 30, y: 17}, 
        { x: 40, y: 32}, 
        { x: 50, y: 22}, 
        { x: 60, y: 14}, 
        { x: 70, y: 25}, 
        { x: 80, y: 18}, 
        { x: 90, y: 20}
      ]
    }
  ]        
});
chart.render();

document.getElementById("chartContainer").addEventListener("click", function(e){
  var xPos = e.pageX - this.offsetLeft, 
      yPos = e.pageY - this.offsetTop;
  addMarkerImages(chart, xPos, yPos);
});


var customMarkers= [];

function addMarkerImages(chart, xPos, yPos){
  var container = $('<div/>').css("height", 30)
  .css("width", 30)
  .addClass("imageToolTip");
  var toolTip = $('<span class="tooltiptext">Information to be shown on mouseover</span>');
  var img = $("<img>").attr("src", "https://i.imgur.com/TUmQf5n.png")
  .css("height", 30)
  .css("width", 30);
  img.appendTo(container);
  toolTip.appendTo(container);
  customMarkers.push(
    {
      container: container.appendTo($("#chartContainer>.canvasjs-chart-container")),
      xPos: xPos, 
      yPos: yPos, 
      xValue: Math.round(chart.axisX[0].convertPixelToValue(xPos)),
      yValue: Math.round(chart.axisY[0].convertPixelToValue(yPos)) 
    });        
  positionMarkerImage(customMarkers[customMarkers.length - 1].container, customMarkers[customMarkers.length - 1].xPos , customMarkers[customMarkers.length - 1].yPos); 
}

function positionMarkerImage(customMarker, xPos, yPos){ 
  customMarker.css({"position": "absolute", 
                    "display": "block",
                    "top": yPos - customMarker.height()/2,
                    "left": xPos - customMarker.width()/2
                   });
}

$(window).resize(function() {
  for(var i = 0; i < customMarkers.length; i++){
    positionMarkerImage(customMarkers[i].container,...