JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

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

<button id="button_20">Range 20</button>
<button id="button_50">Range 50</button>

JavaScript

$(function() {
    var chart;
	$('#container').highcharts({  
	    
	    chart: {
	    },
	    
		rangeSelector: {
			enabled: false			
		},
		
		exporting: {
			enabled: false
		},

		title : {
			text : 'Ranges'
		},

		navigator: {
			enabled: true,
		},
			
		xAxis: {
			lineColor: '#ffcc00'
		},
	    
		series : [{
			name : 'Random data',
			data : (function() {
				// generate an array of random data
				var data = [], i;
				for( i = 1; i <= 100; i++) {
					data.push([
						i,
						Math.round(Math.random() * 100)
					]);
				}
				return data;
			})()
		}]

	});
    
    chart = $('#container').highcharts();
    
	// the button action
	$('#button_20').click(function() {
		
		chart.xAxis[0].setExtremes(20,40);		
    });
    
	$('#button_50').click(function() {
		
		chart.xAxis[0].setExtremes(30,80);		
    });        
});