JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>


    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	<div>
		<button id="btnResetZoom">Reset zoom</button>
		<button id="btnDisableHorizontalZoom">Disable horizontal zoom</button>
		<button id="btnDisableVerticalZoom">Disable vertical zoom</button>
	</div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({

		chart: {
			renderTo: 'container',
			type: 'spline',
			zoomType: 'xy',
			alignTicks: false,
			resetZoomButton: {
				theme: {
					display: 'none'
				}
			},
			events: {
				load: function(event) {

					console.log('extremes', event.target.yAxis[1]);
				},
				selection: function (event) {

					console.log(event);

					console.log('extremes', chart.yAxis[1]);

					//Hides gridlines on zoom, and show it again after ugly animation is done
					/*$.each(chart.yAxis, function(index, yAxis) {
						yAxis.update({
							gridLineWidth: 0
						});
					});

					setTimeout(function() {
						$.each(chart.yAxis, function(index, yAxis) {
							yAxis.update({
								gridLineWidth: 1
							});
						});
					}, 500);*/

					//Gives min and max points from the selection by specified axis (maybe useful anytime for range selection)
/*					if (event.xAxis)
						console.log('min: '+ event.xAxis[0].min +', max: '+ event.xAxis[0].max);*/
				}
			}
		},
        title: {
            text: '',
            x: -20 //center
        },
		legend: {
			enabled: false	//Hide the legend
		},
		credits: {
			enabled: false	//Hide credits (highcarts.com link)
		},
		exporting: {
			enabled: false	//Hide export menu
		},
        xAxis: {
			title: {
				text: 'sec'
			},
			type:'second',
			lineColor: '#666666',
			lineWidth: 2,

			endOnTick: false,
			showFirstLabel: false,
			startOnTick: true,

			gridLineWidth: 0,				//Shows a grid starting from the tick within the data content
			tickInterval:1,
			tickLength: 10,					//Tick length (height)
			tickWidth: 2,					//Tick width (2px)
			tickColor: '#666666',

			minorGridLineWidth: 0,			//Shows a grid starting from the tick within the data content
			minorTickInterval:.1,
			minorTickLength: 6,				//Minortick length (height -> half of tick tickLength)
			minorTickWidth: 1,				//Minortick width (1px)
			minorTickColor: '#666666',

			min: 0, //Prevent for generating...