JSFiddle - React, Tailwind, and code Playground

by tannm

HTML

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


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

JavaScript

$(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {       
        var ohlc = [],
            volume = [],          
            dataLength = data.length;    
        for (i = 0; i < dataLength; i++) {
            ohlc.push([
                data[i][0],
                data[i][1], 
                data[i][2], 
                data[i][3], 
                data[i][4] 
            ]);
            volume.push([
                data[i][0], 
                data[i][5] 
            ])
        }       
        var groupingUnits = [[
            'week',                         
            [1]                             
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]];    
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                alignTicks: false,
                plotBorderWidth:1
            },   
            rangeSelector: {
                enabled: false
            },
            plotOptions:{
                series:{
                    connectNulls:true                             
                },
                candlestick: {
                    color: 'red',
                    upColor: 'green',
                },
                ohlc: {
                    color: 'green'
                }
            },            
             xAxis: {            
                type: 'datetime',
                title: {
                    text: null
                },
                 gridLineWidth :0
                 
             },
            yAxis: [{
                title: {
                    text: 'First'
                },
                height: 250,
                lineWidth: 2
            }, {
                title: {
                    text: 'second'
                },
                top: 280,
                height: 50,
                offset: 0,
                endOnTick: true,
        ...