はじめに

Highchartsは商用利用では有償になりますが、様々なパターンがあらかじめ用意されており、
簡単にグラフを描くことが出来ます。

今回、Highchartsの機能であるZoomを使った際に、Zoom後のX軸の値を取得したかったのですが、
ちょっと手間取ってしまったので参考までに記載しておきます。
（もっと簡単な取り方があるような気がしますが...）

LINE(線)グラフを描く

下記のような記述で簡単にグラフが描画できます。

<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph"></div>

<script>
Highcharts.chart('graph', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'TEST LINE'
    },
    xAxis: {
        categories: ['201801', '201802', '201803', '201804', '201805', '201806', '201807', '201808', '201809', '201810']
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'TEST1',
        data: [2000,2040,1910,2030,2070,2230,2410,2070,1980,1910]
    }, {
        name: 'TEST2',
        data: [2860,3110,2770,1870,1730,1440,1750,1910,2140,2560]
    }]
});
</script>

</body>
</html>

Zoomの設定

下記の1行追記することでZoomが有効になります。
(今回はx軸を対象)

<script>
Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x'  // ←　ココ
    },
    title: {
        text: 'TEST LINE'
    },
    xAxis: {

※ 上記例は範囲を選択すると 201805 - 201810の区間にズームされる

eventsの設定

Zoom後のX軸の値を取得するためtickPositionsを取得しticksのlabel.textStrの値を
下記の2イベントで取得して見てみる。chart.eventsマニュアル

events.selectionの場合（初めはこれで取れると思ってた...）

Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x',
        events: {
            selection: function(e){
                console.log(e);
                var aTicksP = e.target.xAxis[0].tickPositions;
                var aTicksV = e.target.xAxis[0].ticks;
                for(let i in aTicksP) {
                  console.log(aTicksV[aTicksP[i]].label.textStr);
                }
            }
        }
    },
    title: {

結果：
選択範囲外のX軸値もすべて返ってきてしまったのでNG

events.redrawの場合

Highcharts.chart('graph', {
    chart: {
        type: 'line',
        zoomType: 'x',
        events: {
            redraw: function(e){
                console.log(e);
                var aTicksP = e.target.xAxis[0].tickPositions;
                var aTicksV = e.target.xAxis[0].ticks;
                for(let i in aTicksP) {
                  console.log(aTicksV[aTicksP[i]].label.textStr);
                }
            }
        }
    },
    title: {

結果：
範囲内の値が返ってきたのでひとまずよしっ！

まとめ

selectionイベントでは、アクション時点の値が取れるみたいですね。
また、Highchartsでグラフの範囲選択が出来るのはいろいろ使い道がありそうです。