Get the x axis range on selecting a zoom range in Highcharts

Question

I have a bar and a spline graph in Highcharts. The zoom option has been enabled on the graph so it zooms in when I select a particular area. Is it possible to get the x-axis values of the selected area which gets zoomed? For example, if the x-axis has date from 01-01-2015 to 30-01-2015 and I select the range from 01-01-2015 to 15-01-2015 to be zoomed, it gives me 1 to 15.3 ( basically its converting the x-axis in terms of the length of the columns) and not 01-01-2015 to 15-01-2015.

$(function () {
    $('#container').highcharts({
        chart: {
            events: {
                selection: function (event) {
                    var text, label;
                    if (event.xAxis) {
                        text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
                    } else {
                        text = 'Selection reset';
                    }
                    label = this.renderer.label(text, 100, 120)
                        .attr({
                            fill: Highcharts.getOptions().colors[0],
                            padding: 10,
                            r: 5,
                            zIndex: 8
                        })
                        .css({
                            color: '#FFFFFF'
                        })
                        .add();

                    setTimeout(function () {
                        label.fadeOut();
                    }, 3000);
                }
            },
            zoomType: 'x'
        },
        title: {
            text: '',
            style: {
                color: '#cc0000',
                fontWeight: 'bold'
            }
        },
        xAxis: {
            categories: [{{{xaxisLabel}}}],
            crosshair: true
        },
         yAxis: [{ /* Primary yAxis */
            labels: {
                format: '{value}%',
                style: {
                    color: '#cc0000'
                }
            },
            title: {
                text: 'Failure Percentage',
                style: {
                    color: '#cc0000'
                }
            }
        }, { /* Secondary yAxis */
            title: {
                text: 'Success Percentage',
                style: {
                    color: '#009900'
                }
            },
            max: 100, 
            labels: {
                format: '{value} %',
                style: {
                    color: '#009900'
                }
            },
            opposite: true
        }],
        labels: {
            items: [{
                html: '',
                style: {
                    left: '2px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        credits: {
          enabled: false
        },
        series: [{
            type: 'column',
            name: 'Success',
            color: '#7deda2',
            yAxis: 1,
            tooltip: {
                pointFormatter: function(){
                  return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
                }
            },
            data: [{{barSuccess}}]
        }, {
            type: 'spline',
            name: 'Failure',
            tooltip: {
                pointFormatter: function(){
                  return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
                }
            },
            data: [{{barFailure}}],
            marker: {
                lineWidth: 3,
                lineColor: Highcharts.getOptions().colors[8],
                fillColor: 'red'
            }
        }]
    });
});

Thanks in advance

Answer 1

You can use the event.xAxis[0].min and the event.xAxis[0].max as indexes.

So, let's say your xaxis categories array is called xaxis_array you can access its values by using something like xaxis_array[event.xAxis[0].min] and get the original value you need.

Hope it helps