[Solved]-Highcharts: Adding clickable image to every xAxis gridLine-Highcharts

Building on Mark's suggestion using redraw event to position the images and using load event to create them. Adding them on load is necessary to make them available during export and you would not want to create new images on each redraw either.

These chart events are used:

events: {
    load: drawImages,
    redraw: alignImages
}

In the drawImages function I'm using the inverse translation for the xAxis to position the images on the chart:

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth / 2,
y = chart.plotTop - imageWidth / 2;

and then adding them and setting a click handler, zIndex, pointer cursor:

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth)
    .on('click', function() {
        location.href = 'http://example.com'
    })
    .attr({
        zIndex: 100
    })
    .css({
        cursor: 'pointer'
    })
   .add(); 

In alignImages the attr function is used to set new x and y values for the images which are calculated the in the same way as in drawImages.

Full example on jsfiddle

Screenshot: