CODEWITHSUNDEEP
javascriptjqueryhighcharts
Jugal Thakkar
Jugal Thakkar

Reputation: 13472

How to handle mouse events on axis labels in highcharts

How can mouse events be captured on highcharts axis label?
I wish to handle the click event on the labels to perform certain actions

A highchart demo

Upvotes: 2

Views: 4939

Answers (1)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

The axis labels can be accessed as yAxis.ticks["x"].label.element. This is the element of the label, and now any event on this element can be handled as follows.

var yAxis = chart.yAxis[0];
var onYaxisRedraw = function() {
    for (var tickPos in yAxis.ticks) {
        var $element=$(yAxis.ticks[tickPos].label.element);
        $element.unbind('click');
        $element.click(function() {
            alert("hi");
        });
    }
}
onYaxisRedraw();
yAxis.redraw(onYaxisRedraw);

It's always better to unbind any previously added handler as same labels may be reused by highchart internally.

Handling/capturing events on axis labels @ jsFiddle

Upvotes: 2

Related Questions