JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="button1" class="autocompare">1</button>
<button id="button2" class="autocompare">2</button>

JavaScript

var id = 0;
function seriesBuilder() {
    var res = {
        id: `s${++id}`,
        data : [],
        type: "scatter",
        marker : {
            enabled : true,
            radius : 20
        }
    };
    return {
        setId: function(id) {
            res.id = id;
            return this;
        },
        setData: function(data) {
            res.data = data.map((a,i) => ({x: i*100000, y: a}));
            return this;
        },
        val: function () {
            return res;
        }
    }
}

function inRange(a,v,b) {
    return (a <= v && v <= b);
}

$(function () {
     $('#container').highcharts('StockChart', {
        series : [
            seriesBuilder()
                .setId('test')
                .setData(
                    Array(16).fill(100)
                    .map((a,i) => (i !== 11) ? a : 60)
                    .map((a,i) => (i !== 6) ? a+i : 0)
                )
                .val()
        ]
    });

    chart = $('#container').highcharts();
    s = chart.series;

    chart.get('test')
        .points
        .filter(({y: v}) => inRange(103, v, 108))
        .forEach(p => p.remove());

    $('#button1').click(function () {
        chart.xAxis[0].setExtremes(
            850000,
            1450000
        );
    });

    $('#button2').click(function () {
        chart.xAxis[0].setExtremes(
            950000,
            1450000
        );
    });
});