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.

score 4 · Accepted Answer · answered Feb 06 '17 at 07:44

4

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/

answered Feb 06 '17 at 07:44

Malay Sarkar

411
3
9

Thnx great tip and help.How did you get to know about this method ? did you inspect elements of highchart and tried out? Because I could n't find any related document about this label and ticks event setting from their API docs. – Buddhika Chaturanga Sep 10 '17 at 15:57
Yes; Hope they don't break it in future releases. – Malay Sarkar Sep 14 '17 at 05:46
1

hehe If they do that.. what to do.. re-inspect and do changes :*) – Buddhika Chaturanga Sep 15 '17 at 16:22

score 2 · Answer 2 · answered Feb 06 '18 at 11:48

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 () { ... }
    }
  }
}

score 0 · Answer 3 · answered Feb 05 '18 at 03:23

0

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);
    }
});

answered Feb 05 '18 at 03:23

JZ Tay

61
2
10

or you could transpile the code down or polyfill, since Array.forEach isn't universally available if you must support older browsers. – mix3d Jun 18 '18 at 14:43

In high chart how to add event for label click

3 Answers3

Linked