Position Image on Chart using convertValueToPixel - CanvasJS JavaScript Charts

Position Image on Chart using 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/SG7Nlz6.png" class="image" id="apple" style="position: absolute;">
<img src="http://i.imgur.com/Qtzsd5L.png" class="image" id="orange" style="position: absolute;">
<img src="http://i.imgur.com/79QHnSA.png" class="image" id="banana" style="position: absolute;">
<img src="http://i.imgur.com/tQJLOPF.png" class="image" id="mango" style="position: absolute;">
<img src="http://i.imgur.com/kLu6NYn.png" class="image" id="grape" style="position: absolute;">

CSS

.image{
  pointer-events:none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
		theme: "theme2",
		title:{
			text: "Position Image over Chart"              
		},
		data: [              
		{			
			type: "column",
			dataPoints: [
				{ label: "apple",  y: 14  },
				{ label: "orange", y: 20  },
				{ label: "banana", y: 25  },
				{ label: "mango",  y: 30  },
				{ label: "grape",  y: 28  }
			]
		}
		]
});

chart.render();

var parentOffset = $("#chartContainer").offset();

var fruits = [];
fruits.push(document.getElementById('apple'));
fruits.push(document.getElementById('orange'));
fruits.push(document.getElementById('banana'));
fruits.push(document.getElementById('mango'));
fruits.push(document.getElementById('grape'));

positionImages(chart);
   
$( window ).resize(function() {
	positionImages(chart);
});

function positionImages(chart){
	var axisYMinOffsetTop, dataPointOffsetLeft;
	axisYMinOffsetTop = chart.axisY[0].convertValueToPixel(chart.axisY[0].minimum); 
  
  for(var i = 0; i < fruits.length; i++){
  	dataPointOffsetLeft = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x);
    fruits[i].width = chart.dataPointWidth * .5; // setting the width of image to half of dataPoint width 	
    fruits[i].style.top =  axisYMinOffsetTop - fruits[i].height + parentOffset.top + "px"; //setting the image position from top
    fruits[i].style.left =  dataPointOffsetLeft + parentOffset.left - (fruits[i].width/2) + "px";//setting the image position from left
  }
}