JSFiddle - React, Tailwind, and code Playground

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", {
  data: [
    {
      type: "splineArea",      
      dataPoints: [
        { x: 10, y: 5 }, 
        { x: 15, y: 10 }, 
        { x: 20, y: 17}, 
        { x: 25, y: 32}, 
        { x: 30, y: 22}, 
        { x: 35, y: 14}
      ]
    }
  ]        
});
chart.render();

$.getJSON("https://api.myjson.com/bins/eqjxb", function(result) {
  for (var i = 0; i <= result.length - 1; i++) {
    addMarkerImages(chart, result[i].x, result[i].y, result[i].toolTipText);
  }
});


var customMarkers= [];

function addMarkerImages(chart, xPos, yPos, toolTipText){
  var container = $('<div/>').css("height", 30)
  .css("width", 30)
  .addClass("imageToolTip");
  var toolTip = $('<span class="tooltiptext">'+ toolTipText +'</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")),
      xValue: xPos,
      yValue: yPos,
      toolTipText: toolTipText
    });        
  positionMarkerImage(customMarkers[customMarkers.length - 1].container, chart.axisX[0].convertValueToPixel(customMarkers[customMarkers.length - 1].xValue), chart.axisY[0].convertValueToPixel(customMarkers[customMarkers.length - 1].yValue)); 
}

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, chart.axisX[0].convertValueToPixel(customMarkers[i].xValue), chart.axisY[0].convertValueToPixel(customMarkers[i].yValue));
  }
});