Position Image on Marker with the help of convertValueToPixel - CanvasJS JavaScript Charts

Position Image on Marker with the help of convertValueToPixel - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%; position: relative;"></div>
<img src="http://i.imgur.com/gzn48eN.png" id="image" style="position: absolute;">

CSS

#image{
  pointer-events:none;
}

JavaScript

$("#chartContainer").parent().css("margin-left", "0px");
$("#chartContainer").parent().css("margin-top", "0px");

var chart = new CanvasJS.Chart("chartContainer", {		
		title:{
			text: "Position Image over Chart"              
		},
		data: [              
		{			
			type: "spline",
			dataPoints: [
				{ x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
			]
		}
		]
	});
  
chart.render();

var image = document.getElementById("image"); 
image.width = 30;

//Position image based on dataPoint x & y value
image.style.top = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[1].y) - (image.width/2) + "px";
image.style.left = chart.axisX[0].convertValueToPixel (chart.data[0].dataPoints[1].x) - (image.width/2) + "px";

//Re-position Image on resizing the window
$( window ).resize(function() {
  image.style.top = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[1].y) - (image.width/2) + "px";  
  image.style.left = chart.axisX[0].convertValueToPixel (chart.data[0].dataPoints[1].x) - (image.width/2) + "px";
});