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) {
  console.log(e);
  if (e.dataPoint.markerImageUrl) delete e.dataPoint.markerImageUrl
  else e.dataPoint.markerImageUrl = "https://i.imgur.com/TUmQf5n.png";
  chart.render();
  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);
    }
  }
}

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("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
  });
}

$(window).resize(function() {
  for (var i = 0; i < chart.data.length; i++) {
    for (var j = 0; j <...