*Highcharts* How to get the min and max value of the zoom box

Question

I use the Zoom function in highcharts by setting zoomType: 'xy' and want to ask how can I find the min and max value on x Axis of the zoom box when I use my mouse to select the zoom position. I try to use getExtremes() :

events: {
    afterSetExtremes: function () {
        min = parseFloat(this.getExtremes().min);
        max = parseFloat(this.getExtremes().max);
    }
}

but it seems that the returned min and max values are the values of the whole chart screen after zooming, not the box that I select to zoom.

Answer 1

You can use the chart.events.selection event to get this information. For example:

chart: {
    events: {
        selection: function(event) {
            if(event.xAxis != null)
                console.log("selection: ", event.xAxis[0].min, event.xAxis[0].max);
            else
                console.log("selection: reset");
        }
    },
    zoomType: 'xy'
}

See this JSFiddle for a demonstration and logging of the results.