score:1

Accepted answer

Similar to the example that you provided, you can use Highcharts.SVGRenderer to create buttons. In the click event you need to use the setExtremes method with the right values:

Highcharts.chart('container', {
    chart: {
        marginBottom: 100
    },
    legend: {
        enabled: false
    },
    series: [{
        type: 'column',
        data: getData(100)
    }]
}, function(chart) {
    var dataLength = chart.series[0].data.length,
        buttonsNum = 3,
        btnTop = chart.plotHeight + chart.plotTop + 40,
        options = {
            str: '<<',
            x: 0,
            y: btnTop,
            step: dataLength / buttonsNum
        };

    chart.xAxis[0].setExtremes(0, options.step);
    chart.customBtns = [];

    for (var i = 0; i < buttonsNum; i++) {
        if (!i) {
            renderBtn(options, chart);
            options.str = '<';
            renderBtn(options, chart);
        }
        options.str = i + 1;
        renderBtn(options, chart);

        if (i === buttonsNum - 1) {
            options.str = '>';
            renderBtn(options, chart);
            options.str = '>>';
            renderBtn(options, chart);
        }
    }
    placeBtns(chart);
});

function renderBtn(options, chart) {
    chart.customBtns.push(chart.renderer.button(
            options.str,
            options.x,
            options.y,
            function() {
                setRange.call(this, options, chart.xAxis[0]);
            })
        .attr({
            width: 20
        })
        .add());

    options.x += options.width;
}

function setRange(options, axis) {
    var textStr = this.text.textStr,
        min,
        max;

    if (Highcharts.isNumber(textStr)) {
        min = (textStr - 1) * options.step;
        max = (textStr - 1) * options.step + options.step;
    } else {
        switch (textStr) {
            case '<<':
                min = 0;
                max = options.step;
                break;

            case '<':
                if (!axis.min) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.min - options.step;
                    max = axis.min;
                }

                break;

            case '>>':
                min = axis.dataMax - options.step + 1;
                max = axis.dataMax + 1
                break;

            case '>':
                if (axis.max >= axis.dataMax) {
                    min = axis.min;
                    max = axis.max;
                } else {
                    min = axis.max;
                    max = axis.max + options.step;
                }
                break;
        }
    }

    axis.setExtremes(min, max);
}

function placeBtns(chart) {
    var btns = chart.customBtns,
        btnsWidth = 0,
        x;

    btns.forEach(function(btn) {
        btnsWidth += btn.getBBox().width
    });

    x = (chart.chartWidth - btnsWidth) / 2;

    btns.forEach(function(btn) {
        btn.attr({
            x: x
        });
        x += btn.getBBox().width
    });
}

Live demo: http://jsfiddle.net/BlackLabel/xu95fg7L/

API Reference:

https://api.highcharts.com/class-reference/Highcharts#.isNumber

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button


Related Query