I am trying to create a bar chart with arrows at the end of each bar pointing to the next bar. For this, I need to know the coordinates of the end point of each bar. Please refer to the image below for more clarity on what I am trying to achieve. 
My approach right now is to get the clientX in each series[0].points[i] inside the chart object and add it with the plotWidth to get to the point where I need to render the arrow image. This doesn't seem to work right now as the arrows are rendered incorrectly. I have a fiddle here with my current approach. I am trying to achieve the 'X' at the end of each bar, now it comes somewhere in the middle.
Here is the jsfiddle for the problem - http://jsfiddle.net/qp90yx34/1/
Here is the code for where I am at right now -
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function () {
_.each(this.series[0].points, (point, key) => {
if (!_.isUndefined(this.series[0].points[key + 1])) {
this.renderer.text("X",
point.clientX + point.pointWidth, //x
point.plotY) // y
.add();
}
})
},
}
},
title: {
text: '',
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
format: '<b>{point.name}</b> ({point.y:,.0f})',
},
}
},
legend: {
enabled: false
},
xAxis: {
categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5']
},
series: [{
type: 'column',
name: 'Marks',
data: [83, 72, 71, 63, 74]
}]
});
});