JSFiddle - React, Tailwind, and code Playground

by Chris Vecchio

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.src.js"></script>
<div id="container"></div>

JavaScript

Highcharts.chart('chart', {
			chart : {
				type : 'column',
                zoomType : 'x',
                    events : {
                        selection : function(event) {
                            event.preventDefault();
                            console.debug("zoomingStartDate " + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].min));
							console.debug("zoomingEndDate " + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].max));
                            chart.xAxis[0].setExtremes(event.xAxis[0].min,  event.xAxis[0].max);
                        }
                    }
			},
            xAxis : {
					type : 'datetime'
				},
			series : [ {
				data : [ 29.9,
						71.5,
						106.4,
						129.2,
						144.0,
						176.0,
						135.6,
						148.5,
						216.4,
						194.1,
						95.6,
                        29.9,
						71.5,
						106.4,
						129.2,
						144.0,
						176.0,
						135.6,
						148.5,
						216.4,
						194.1,
						95.6,
                        29.9,
						71.5,
						106.4,
						129.2,
						144.0,
						176.0,
						135.6,
						148.5,
						216.4,
						194.1,
						95.6,
						54.4 ],
					pointStart: Date.UTC(2010, 0, 1),
					pointInterval : 600000
			} ]
		});