CODEWITHSUNDEEP
highcharts
Yasin
Yasin

Reputation: 1242

In high chart how to add event for label click

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. enter image description here

Thanks In advance.

Upvotes: 7

Views: 10897

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

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

Upvotes: 2

JZ Tay
JZ Tay

Reputation: 61

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

Upvotes: 0

Malay Sarkar
Malay Sarkar

Reputation: 420

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/

Upvotes: 4

Related Questions