JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 450px; width: 100%;"></div>

CSS

img{
  pointer-events: none;
}

JavaScript

var dataPoints1 = [
  { label: "apple",  y: 14  },
  { label: "orange", y: 20  },
  { label: "banana", y: 25  },
  { label: "mango",  y: 30  },
  { label: "grape",  y: 28  }
];
var stockChart = new CanvasJS.StockChart("chartContainer",{
  theme: "light2",
  rangeChanged: function() {
    for(var i = 0; i < stockChart.charts[0].data[0].dataPoints.length; i++){
      positionImage(fruits[i], i);
    }
  },
  animationEnabled: true,
  title:{
    text:"Images as custom markers"
  },
  charts: [{
    axisY: {
      title: "No of Fruits"
    },
    data: [{
      type:"stepLine",
      name: "fruits",
      dataPoints : dataPoints1
    }]
  }],
  rangeSelector: {
    enabled: false
  }
});

stockChart.render();

var images = [];
var fruits= [];

images.push({url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/apple.png"});
images.push({url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/orange.png"});
images.push({url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/banana.png"});
images.push({url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/mango.png"});
images.push({url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/grape.png"});

addImages(stockChart);

function addImages(chart){
  for(var i = 0; i < stockChart.charts[0].data[0].dataPoints.length; i++){
    var label = stockChart.charts[0].data[0].dataPoints[i].label;

    if(label){
      fruits.push( $("<img>").attr("src", images[i].url)
                  .attr("class", label)
                  .css("display", "none")
                  .appendTo($("#chartContainer>.canvasjs-stock-container>.canvasjs-chart-panel"))
                 );        
    }
    positionImage(fruits[i], i);
  }    
}

function positionImage(fruit, index){ 
  var imageBottom =  stockChart.charts[0].axisY[0].convertValueToPixel(stockChart.charts[0].data[0].dataPoints[index].y);   
  var imageCenter =...