In high chart how to add event for label click

Question

In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.

E.g. I want the event for month name in following example.

Thanks In advance.

Answer 1

Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.

Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/

Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:

xAxis: {
  labels: {
    events: {
      click: function () { ... }
    }
  }
}

Answer 2

If you don't want to use JQuery you can use it as follows

chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
    label.style.cursor = "pointer";
    label.onclick = function(){
      alert('You clicked on '+this.textContent);
    }
});

complete code at http://jsfiddle.net/t07ok5v3/5/

Answer 3

I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.

for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
    chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
      alert('You clicked on '+this.textContent);
    }
});