Accepted answer

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('', x, y, imageWidth, imageWidth)
    .on('click', function() {
        location.href = ''
        zIndex: 100
        cursor: 'pointer'

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




Couple of ideas. First, I would use the chart redraw event to know when the chart is being redrawn (say on a zoom). Then second, explicitly place your images at the axis locations of interest. To get those query directly out of the DOM.

Using jQuery:

$('.highcharts-axis') //return an array of the two axis.

They will have svg "text element" children with (x, y) positions.

Related Query

More Query from same tag