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>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  title: {
    text: "Image as marker"
  },
  theme: "theme2",
  animationEnabled: true,
  rangeChanged: 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);
      }
    }
  },
  data: [{
    type: "stepLine",
    markerType: "none",
    dataPoints: [
      { x: 10, y: 71, markerImageUrl: "https://i.imgur.com/TUmQf5n.png" },
      { x: 20, y: 55, markerImageUrl: "https://i.imgur.com/rx4VPtF.png" },
      { x: 30, y: 50, markerImageUrl: "https://i.imgur.com/qrqIve0.png" },
      { x: 40, y: 70, markerImageUrl: "https://i.imgur.com/TUmQf5n.png" },
    ]
  }, {
    type: "stepLine",
    markerType: "none",
    dataPoints: [
      { x: 05, y: 60, markerImageUrl: "https://i.imgur.com/TUmQf5n.png" },
      { x: 15, y: 40, markerImageUrl: "https://i.imgur.com/rx4VPtF.png" },
      { x: 25, y: 30, markerImageUrl: "https://i.imgur.com/qrqIve0.png" },
      { x: 35, y: 20, markerImageUrl: "https://i.imgur.com/TUmQf5n.png" },
    ]
  }]
});

chart.render();

var customMarkers = [];
addMarkerImages(chart);

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 =...