JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

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

<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

$(function() {

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

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            xAxis: [{
                ordinal: false,
                type: 'datetime',
//                tickInterval: 8 * 3600 * 1000,
                tickPosition: 'inside',
                gridLineWidth: 1,
                gridLineColor: '#F0F0F0',
                startOnTick: false,
                endOnTick: false,
                minPadding: 0,
                maxPadding: 0,
                showLastLabel: true,
                labels: {
                    formatter: function() {
                        return Highcharts.dateFormat('%H', this.value);
                    }
                }
            }, {
                ordinal: false,
                linkedTo: 0,
//                tickInterval: 24 * 3600 * 1000,
                labels: {
                    formatter: function() {
                        return Highcharts.dateFormat('<span style="font-size: 12px; font-weight: bold">%a</span>, %b %e', this.value);
                    },
                    align: 'left',
                    x: 3
                },
                opposite: true,
                tickLength: 20,
                gridLineWidth: 1
            }],

            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    yDecimals: 2
                }}]
        });
    });

});