Position Image on top of Column Chart - CanvasJS JavaScript Charts

Position Image on top of Column Chart - CanvasJS JavaScript Charts

by canvasjs

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>

CSS

img{
    pointer-events: none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
		theme: "theme2",
		title:{
				text: "Brand Value of Beverages"
		},
		axisY: {
				maximum: 4.2,
				title: "Brand Value (in USD)",
				prefix: "$",
				suffix: "B"
		},
		axisX: {
				title: "Brands"
		},
		toolTip: {
				fontColor: "black",
				borderColor: "black",
				content: "{label}: ${y} billion"
		},
		data: [{
				type: "column",
				color: "transparent",
				dataPoints: [
						{ label: "Lipton", y: 4.1, url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/lipton.png" },
						{ label: "Sprite",  y: 3.7, url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/sprite.png" },
						{ label: "Fanta",  y: 3.3, url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/fanta.png" },
						{ label: "Mountain Dew", y: 2.7, url: "https://canvasjs.com/wp-content/uploads/images/gallery/gallery-overview/mountain-dew.png" }
				]
		}]
});
chart.render();

var beverages= [];

addImages(chart);

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

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

function positionImage(beverage, index) { 
		var imageBottom = chart.axisX[0].bounds.y1;     
		var imageCenter = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[index].x);
		var yInPixels = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[index].y);

		beverage.height(imageBottom - yInPixels);
		beverage.width(beverage.height() * .275);

		beverage.css({"position": "absolute", 
				"display": "block",
				"top": imageBottom  - beverage.height(),
				"left": imageCenter -...