which rangeSelector button is selected in highcharts

Question

I want to know how to determine which rangeSelector button is selected in highstock.

my rangeSelector buttons:

   buttons: [{
            type: \'mon         


        

Answer 1

You can catch setExtremes() (http://api.highcharts.com/highstock#xAxis.events.setExtremes), and then in event obejct you have access to event.rangeSelectorButton object with count, text and type property.

 xAxis: {
        events: {
            setExtremes: function(e) {
                console.log(this);
                if(typeof(e.rangeSelectorButton)!== 'undefined')
                {
                  alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
                }
            }
        }
    },

http://jsfiddle.net/E6GHC/1/

Answer 2

You can get the a lot of information about the selected button directly from the rangeSelector.

For example:

var chart = $('#container').highcharts();

var selected = chart.rangeSelector.selected; // Index of selected button
var text = chart.rangeSelector.buttonOptions[selected].text; // Text of selected button
var type = chart.rangeSelector.buttonOptions[selected].type; // Type of selected button

And some other random information in buttonOptions and buttons under rangeSelector, using the selected index.

See this JSFiddle demonstration to see it in action.