How to handle mouse events on axis labels in highc

Question

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

Answer 1

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