JSFiddle - React, Tailwind, and code Playground

by halloleo

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() {

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

            title: {
                text: 'AAPL Stock Price'
            },
            xAxis: {
                minRange:6 * 30 * 24 * 3600 * 1000,
                events: {
                    afterSetExtremes: function(e) {
                        var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time
                        var xaxis = this;
                        if ((e.max - e.min) > maxDistance) {
                            var min = e.max - maxDistance;
                            var max = e.max;
                            window.setTimeout(function() {
                                xaxis.setExtremes(min, max);
                            }, 1);
                        }
                    }
                }
            },
            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }}]
        });
    });

});