JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Image as marker"
  },
  theme: "theme2",
  animationEnabled: true,
  data: [{
    type: "scatter",
    click: onClick,
    markerType: "circle",
    dataPoints: [
      { x: 10, y: 71, markerImageUrl: "https://i.imgur.com/TUmQf5n.png" },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 70 }
    ]
  }]
});
chart.render();

var customMarkers = [];
addMarkerImages(chart);

function onClick(e) {
  customMarkers[0][e.dataPointIndex].css({"display": e.dataPoint.imageShown ? "none" : "block"});
  e.dataPoint.imageShown = !e.dataPoint.imageShown;
}

function addMarkerImages(chart) {
  for (var i = 0; i < chart.data.length; i++) {
    customMarkers[i] = [];
    for (var j = 0; j < chart.data[i].dataPoints.length; j++) {
      customMarkers[i].push($("<img>").attr("src", chart.data[i].dataPoints[j].markerImageUrl)
                            .css("display", "none")
                            .css("pointer-events", "none")
                            .css("height", 30)
                            .css("width", 30)
                            .appendTo($("#chartContainer>.canvasjs-chart-container"))
                           );
      positionMarkerImage(customMarkers[i][j], i, j);
    }
  }
}

function positionMarkerImage(customMarker, dsIndex, dpIndex) {
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[dsIndex].dataPoints[dpIndex].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[dsIndex].dataPoints[dpIndex].y);
	
  customMarker.css({
    "position": "absolute",
    "display": "block",
    "top": pixelY - customMarker.height() / 2,
    "left": pixelX - customMarker.width() / 2
  });
  chart.data[dsIndex].dataPoints[dpIndex].imageShown = true;
}

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