JSFiddle - React, Tailwind, and code Playground

by gajjargaurav

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"
            },
            xAxis: {
                maxPadding: 0.22, //Prevent chart going off the screen on the right
                minPadding: 0.22,
                events: {
                    afterSetExtremes: function (e) {
                        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;
                        this.setExtremes(e.min, e.max);
                    }
                }
            } 
            },
            yAxis: {
                min: 0,
                title: {
                    text: "Test",
                    tickPosition: 'outside'
                }
            },
            rangeSelector: {
                buttons: [{
                    type: 'all',
                    text: 'All'
                }, {
                    type: 'year',
                    count: 30,
                    text: '>30'
                }, {
                    type: 'year',
                    count: 10,
                    text: '>10'
                }],
                inputEnabled: false,
                enabled: false,
                inputDateFormat: '%m-%Y',
                selected: 0 // all
        },
        title: {
            text: 'AAPL Stock Price'
      ...