JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

$(document).ready(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create a timer
        var start = +new Date();
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        // Create the chart
        var chart = new Highcharts.StockChart({
            chart: {
                type: 'column',
                renderTo: 'container',
                events: {
                    load: function(chart) {
                        this.setTitle(null, {
                            text: 'Built chart at ' + (new Date() - start) + 'ms'
                        });
                    }
                },
                zoomType: 'x'
            },
            tooltip: {
                shared: false,
                formatter: function() {
                    return '<b>' + (this.point.name || this.series.name) + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' + ' ' + Highcharts.numberFormat(this.y, 2) + ' Clicks';
                }
            },
            rangeSelector: {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: 'Cur'},
                {
                    type: 'day',
                    count: 1,
                    text: '1d'},
                {
                    type: 'day',
                    count: 3,
                    text: '3d'},
                {
                    type: 'week',
                    count: 1,
                    text: '1w'},
                {
                    type: 'month',
                    count: 1,
                    text: '1m'}],
                selected: 1
            },

            xAxis: {
                maxZoom: 1 * 24 * 3600000 // one day
            },

            yAxis: {
                title: {
                    text: 'Application Clicks'
                }
           ...