JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<p id="chart-toggle">toggle</p>
<div id="container" style="height: 400px; min-width: 600px"></div>
<div id="container-zoom" style="height: 330px; min-width: 600px"></div>

CSS

#container-zoom {
	visibility: hidden;
	margin-top: -400px;
}
#container-zoom.zoom {
	visibility: visible;
}

JavaScript

$(function() {

	var data = [20, 54, 2, 54, 49, 90, 11, 9, 67, 72, 3, 39, 54, 2, 54, 49, 102, 70, 102, 30, 45, 65, 23, 67, 10, 89, 23, 70, 67, 84, 50, 40, 30, 24, 26, 27, 67, 72, 3, 39, 54, 2, 54, 21, 32, 20, 54, 2, 54, 49, 90, 49, 102, 70, 70, 67, 120, 122, 125, 127, 130, 130, 130, 117, 127, 49, 90, 11, 9, 67, 72, 89, 23, 70, 67, 19, 19, 20, 25, 51, 18, 10, 1, 49, 67, 10, 89, 23, 78, 76, 72, 11, 3, 39, 54, 2, 54, 19, 20, 23];
    
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container',
            type: 'line',
            zoomType: 'x'
        },
        
        title: {
            text: 'Chart - Normal'
        },
        
        xAxis : {
            events : {
                afterSetExtremes : afterSetExtremes
            }
        },

        series : [{
            data : data
        }],

        rangeSelector : {
        	enabled: false
        }
    });

    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container-zoom',
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Chart - Zoomed'
        },

        series : [{
            data : []
        }],

        rangeSelector : {
        	enabled: false
        },

        navigator: {
        	series: {
        		color: '#00f'
        	}
        }
    });

    function afterSetExtremes() {
    	var extremes = this.getExtremes(),
    		min = extremes.min,
    		max = Math.ceil(extremes.max),
    		chart = $('#container-zoom').highcharts(),
    		data_zoomed = data.slice(min, max);

    	chart.series[0].setData(data_zoomed);
    	chart.xAxis[0].setExtremes(0, data_zoomed.length);

    	if (!$("#container-zoom").hasClass('zoom')) {
    		$("#container-zoom").addClass("zoom");
    	}
    }

    $("#chart-toggle").click(function() {
    	$("#container-zoom").toggleClass("zoom");
    });

});