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

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

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: "range step area chart"
  },
  toolTip: {
    shared: true
  },
  data: [
    {
      type: "rangeArea",
      color: "red",
      toolTipContent: null,

      markerType: "none",

      dataPoints: [
        { x: 10, y: [5, 10] },
        { x: 20, y: [5, 10]}, 
        
        { x: 20, y: [4, 12] }, 
        { x: 30, y: [4, 12] }, 
        
        { x: 30, y: [6, 20]}, 
        { x: 40, y: [6, 20]}, 
        
        { x: 40, y: [10, 22]}, 
        { x: 50, y: [10, 22]}, 
        
        { x: 50, y: [11, 18]}, 
        { x: 60, y: [11, 18]}, 
      ]
    },
    {
      type: "stepLine",
      color: "red",
      markerColor: "blue",
      dataPoints: [
        { x: 10, y: 5 },
        { x: 20, y: 4}, 
        { x: 30, y: 6}, 
        { x: 40, y: 10}, 
        { x: 50, y: 11}, 
        { x: 60, y: 11}, 
        
      ]
    },
        {
      type: "stepLine",
      color: "red",
      markerColor: "blue",
      dataPoints: [
        { x: 10, y: 10 },
        { x: 20, y: 12 }, 
        { x: 30, y: 20 }, 
        { x: 40, y: 22 }, 
        { x: 50, y: 18 }, 
        { x: 60, y: 18 }, 
        
      ]
    }
  ]        
});
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, 
   ...