JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://raw.githubusercontent.com/RolandBanguiran/highstock-oxymoronic-candlesticks/master/oxymoronic-candlesticks.js"></script>

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

JavaScript

$(function () {
    $.getJSON('https://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]]
                    ]
                }
            }]
        });
    });
});