JSFiddle - React, Tailwind, and code Playground

by chikunova_nata

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>
<input type="button" value="unzoom" id="resetZoom" />

JavaScript

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        var eventFlag = false;

        function resetChartZoom() {
            chart.zoomOut();
        }
        // Create the chart
        var chart = new Highcharts.StockChart({
            chart: {
                renderTo: $('#container').attr('id'),
                zoomType: "x",
                inverted: true
            },
            navigator: {
              height: 62,
              opposite: true,
              outlineWidth: 0,
            },
            xAxis: {
                maxPadding: 0.22, //Prevent chart going off the screen on the right
                minPadding: 0.22,
                events: {
                    afterSetExtremes: function (e) {
                    console.log('before', e.min, e.max, chart.xAxis[0].dataMin, chart.xAxis[0].dataMax);
                        var length = (e.max - e.min) || 1;
                        minPadding = 0.22,
                        maxPadding = 0.22;
                    
                   /*  if (e.min == chart.xAxis[0].dataMin || e.max == chart.xAxis[0].dataMax) {
                        if (e.min == chart.xAxis[0].dataMin) e.min -= length * minPadding;
                        if (e.max == chart.xAxis[0].dataMax) e.max += length * maxPadding; */
                        
                        console.log('after', e.min, e.max, chart.xAxis[0].dataMin, chart.xAxis[0].dataMax);
                        this.setExtremes(e.min, e.max,true, false);
                   // }
                }
            } 
            },
            yAxis: {
                min: 0,
                title: {
                    text: "Test",
                    tickPosition: 'outside'
                }
            },
            rangeSelector: {
                buttons: [{
                    type: 'all',
                    text: 'All'
                }, {
                    type: 'year',
 ...