Image as marker - CanvasJS JavaScript Charts

Image as marker - CanvasJS JavaScript Charts

by ElanchezhiyanP

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

chart.render();

var customMarkers = [];

addMarkerImages(chart);

function addMarkerImages(chart) {
  for (var i = 0; i < chart.data[0].dataPoints.length; i++) {

    customMarkers.push($("<img>").attr("src", chart.data[0].dataPoints[i].markerImageUrl)
      .css("display", "none")
      .css("height", 30)
      .css("width", 30)
      .appendTo($("#chartContainer>.canvasjs-chart-container"))
    );
    positionMarkerImage(customMarkers[i], i);
  }
}

function positionMarkerImage(customMarker, index) {
  var pixelX = chart.axisX[0].convertValueToPixel(chart.options.data[0].dataPoints[index].x);
  var pixelY = chart.axisY[0].convertValueToPixel(chart.options.data[0].dataPoints[index].y);

  customMarker.css({
    "position": "absolute",
    "display":...