Highcharts: Add a clickable image to each xAxis gridLine

Question

I am creating some custom functions in which users can click on data points in a line chart to add notes to this date. This is a bit misleading, because the notes are not really tied to the metrics themselves, but relate to the date on which it lands. In other words, if I have 6 rows on one line chart that covers the dates 01/01/12 - 01/08/12, one note from 05/05/12 will apply to all 6 series. So, as you can imagine, clicking on a data point in one of the 6th series or on the date 01/05/12 misleads the user, believing that this note will be applied to this data point, and not the entire date and any series that lands on that date.

So, to fix this usability problem, I decided that the best visual signal would be something like this:

An icon will be displayed at the top of each xAxis grid that needs to be scaled using the xAxis gridline (for example, if the user selects an area to enlarge).

Suggestions for a better way to take this off? I only need a suggestion on how best to add an icon to each line ... I have all the functions after the click that are already built.

Answer 1

Building a Mark sentence using the redraw event to place images and using the load event to create them. Adding them to load necessary to make them available during export, and you will not want to create new images on each redraw .

These chart events are used:

 events: { load: drawImages, redraw: alignImages } 

In the drawImages function drawImages I use drawImages translation back to place images on a diagram:

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

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

 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 images, which are calculated in the same way as in drawImages .

Full jsfiddle example

Screenshot:

Answer 2

A couple of ideas. First, I would use the redraw chart to find out when the chart is redrawn (say, when scaling). Then, secondly, explicitly place your images at the points of interest to us. To get this request directly from the DOM.

Using jQuery:

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

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