JSFiddle - React, Tailwind, and code Playground

by navindian

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: 600px"></div>

JavaScript

$(function() {
    
    // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
    $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?callback=?', function(data) {
        
        // Add a null value for the end date 
        data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
                
        // create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container',
                zoomType: 'xy'
            },

            navigator : {
                adaptToUpdatedData: false,
                series : {
                    data : data
                }
            },
            
            title: {
                text: 'AAPL history by the minute from 1998 to 2011'
            },
            
            subtitle: {
                text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
            },
            
            rangeSelector : {
                buttons: [{
                    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'
                }],
                inputEnabled: false, // it supports only days
                selected : 4 // all
            },
            
            xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },

            series...