CODEWITHSUNDEEP
jquerysvghighchartsjquery-events
XwipeoutX
XwipeoutX

Reputation: 4965

Click event on highchart axis

I want to be able to bind an event to the axes in high charts, so I can expose some options for them in the UI (axis interval, text formatting, gridlines, etc.)

Doesn't seem to be a way to do this in highcharts. So far, I can get it to do my bidding when I click on the labels, but not when I click on the spaces between the labels. See the fiddle here, for version 2.2.4: http://jsfiddle.net/gW4p6/174/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        marginRight: 80 // like left
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{
          lineWidth: 1,
          title: {
              text: 'Secondary Axis'
          }
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

var clearSelection = function() { $('.highcharts-axis').css('stroke', ''); };

$('.highcharts-axis').click(function(event) {
    clearSelection();
    $(this).css('stroke', 'green');
    return false;
});
$(document).click(clearSelection);
$('svg').click(clearSelection);

Is there any way that I can reliable catch a click event on the g.highcharts-axis element?

For bonus marks, what's the best way to link the axis with its axis.id in the options? Best I can come up with is to rely on the fact that axis are rendered in the order they are supplied, so I can just loop.

Upvotes: 3

Views: 8360

Answers (2)

OMA
OMA

Reputation: 3690

You can use the click event. Take a look at the API: http://api.highcharts.com/highcharts#series.data.events.click

From the event handler you can get the string with "this.name" or even get some kind of identifier with "this.options.somevariable"

"somevariable" means whatever variable name you create in the series data. For example in my case I name the identifier as simply "id":

{
   name: "My label",
   id: 6,
   events: { 
      click: function()
      {
         alert(
            'The name is ' + this.name +
            ' and the identifier is ' + this.options.id
         );
      }
   }
}

Upvotes: -1

Dinesh Kumar DJ
Dinesh Kumar DJ

Reputation: 488

$('.highcharts-axis text').click(function(){ alert($(this).text());  });

This alerts the text of the axis. This way you could bind click event to each elements in axis.

Upvotes: 5

Related Questions