Highchart annotation click event doesn't work

Question

I am trying to add a click event on a Highchart annotation but it doesn't work ..

I tried to set the events property on the annotation object like described here :

https://www.highcharts.com/products/plugin-registry/single/17/Annotations

events mouseup, click, dblclick. this in a callback refers to the annotation object.

And I don't find anything about annotation events here : https://api.highcharts.com/highcharts/annotations

What I am doing wrong ?

 // Data generated from http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html var elevationData = [ [0.0, 225], [0.1, 226], [0.2, 228], [0.3, 228], [0.4, 229], [0.5, 229], [0.6, 230], [0.7, 234], [0.8, 235], [0.9, 236], [1.0, 235], ]; // Now create the chart Highcharts.chart('container', { chart: { type: 'area', zoomType: 'x', panning: true, panKey: 'shift', scrollablePlotArea: { minWidth: 600 } }, title: { text: '2017 Tour de France Stage 8: Dole - Station des Rousses' }, subtitle: { text: 'An annotated chart in Highcharts' }, annotations: [{ labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)', verticalAlign: 'top', y: 15 }, labels: [{ point: { xAxis: 0, yAxis: 0, x: 0.9, y: 235, }, text: 'Arbois', }], events:{ click: function(e){alert('test');} } }], xAxis: { labels: { format: '{value} km' }, minRange: 5, title: { text: 'Distance' } }, yAxis: { startOnTick: true, endOnTick: false, maxPadding: 0.35, title: { text: null }, labels: { format: '{value} m' } }, tooltip: { headerFormat: 'Distance: {point.x:.1f} km<br>', pointFormat: '{point.y} m asl', shared: true }, legend: { enabled: false }, series: [{ data: elevationData, lineColor: Highcharts.getOptions().colors[1], color: Highcharts.getOptions().colors[2], fillOpacity: 0.5, name: 'Elevation', marker: { enabled: false }, threshold: null }] }); 

 #container { max-width: 800px; min-width: 380px; height: 400px; margin: 1em auto; } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/annotations.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="height: 400px; min-width: 380px"></div> 

EDIT :

I resolved my problem by getting the annotation.group element and assign it a event handler.

 for(var annotation in chart.annotations){
   var element = chart.annotations[annotation].group.element;
   element.addEventListener("click",function(e){alert('here I am');});
 }

Answer 1

It not supported, but very simple and quick in implementation. You need to do the wrap on the initLabel function, and after calling proceed , just assign the events defined in your Annotation / label object. Here is the example code with handling click event:

(function(H) {
  H.wrap(H.Annotation.prototype, 'initLabel', function(proceed, shapeOptions) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var label = this.labels[this.labels.length - 1]
    var annotation = label.annotation
    if (label && annotation) {
      label.element.onclick = label.options.events.click || annotation.options.events.click
    }
  })
})(Highcharts)

It assigns the event defined in your label object, but if it's undefined, it takes the function definition directly from Annotation object for all labels.

Additionally, you can read more about Highcharts.wrap() function here: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Here is the example of using it: http://jsfiddle.net/ew7ufnjb/

[EDIT]

Wrap method is no longer necessary since v7.0. Just delete the wrap method and keep the event definition from general Annotation object.

Live example: http://jsfiddle.net/rgm3puL8/