Highcharts: Adding clickable image to every xAxis gridLine

Question

I\'m building in some custom functionality where users can click on data points in a line chart to add notes to that date. This is a bit misleading as the notes aren\'t actu

Answer 1

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:

Answer 2

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.