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>

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

JavaScript

$(function() {

	$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
		// Create the chart
		$('#container').highcharts('StockChart', {
			

			rangeSelector: {
						buttons: [{
							type: '',
							count: 2,
							text: 'My dates'
						},{
							type: 'hour',
							count: 1,
							text: '1h'
						}, {
							type: 'day',
							count: 1,
							text: '1d'
						}, {
							type: 'month',
							count: 1,
							text: '1m'
						}, {
							type: 'year',
							count: 1,
							text: '1y'
						}, {
							type: 'all',
							text: 'All'
						}],
            },

			title : {
				text : 'AAPL Stock Price'
			},
			xAxis: {    
                events:{
                    afterSetExtremes: function(e) {
                        if (e.trigger == "rangeSelectorButton" && 
                            e.rangeSelectorButton.text == "My dates"){
                            // it is your button that caused this,
                            // so setExtrememes to your custom
                            // have to do in timeout to let
                            // highcharts finish processing events...
                            setTimeout(function(){                            Highcharts.charts[0].xAxis[0].setExtremes(1198681756385,1368144000000)
                                                 }, 1);
                        
                    }
                                    
                                        
	            	    		
	                                   
	            	    		},
                            }
            },
			series : [{
				name : 'AAPL',
				data : data,
				tooltip: {
					valueDecimals: 2
				}
			}]
		});
	});
});