JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/RolandBanguiran/highstock-oxymoronic-candlesticks/master/oxymoronic-candlesticks.js"></script>
<div id="container" style="height: 500px; min-width: 310px"></div>

JavaScript

$(function () {
    var data=[
        [1147651200000,0,5,-2,4],
        [1147651300000,0,-4,0,-4],
        [1147651400000,0,10,0,10],
        [1147651500000,0,-4,0,-4],
        [1147651600000,0,3,0,3],
        [1147651700000,0,-14,0,-14]
        ];
   /* $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function (data) {*/

        // create the chart
        $('#container').highcharts('StockChart', {

            plotOptions: {
                candlestick: {
                    oxymoronic: true,
                    color: '#ff0000',
                    lineColor: '#ff0000',
                    upColor: '#008000',
                    upLineColor: '#008000'
                }
            },

            rangeSelector: {
                inputEnabled: $('#container').width() > 480,
                selected: 1
            },

            title: {
                text: 'Highstock "Oxymoronic" Candlesticks Demo'
            },

            series: [{
                type: 'candlestick',
                name: 'AAPL Stock Price',
                data: data,
                dataGrouping: {
                    units: [
                        ['week', // unit name
                        [1] // allowed multiples
                        ],
                        [
                            'month', [1, 2, 3, 4, 6]]
                    ]
                }
            },
            {
                type : 'flags',
                data : [
                    {
                    x : 1147651200000,      // Point where the flag appears
                    y : 0,      // 
                    title : '4', // Title of flag displayed on the chart 
                    text : 'lplpl'   // Text displayed when the flag are highlighted.
                    },{
                    x : 1147651300000,      // Point where the flag appears
                    y : -4,      // 
                    title : '-4', // Title of flag displayed on...