JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

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

JavaScript

$(function () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=?', function (data) {

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


            rangeSelector : {
                selected : 1
            },

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

            series : [{
                type : 'candlestick',
                name : 'AAPL Stock Price',
                data : data,
                dataGrouping : {
                    units : [
                        [
                            'week', // unit name
                            [1] // allowed multiples
                        ], [
                            'month',
                            [1, 2, 3, 4, 6]
                        ]
                    ]
                }
            }, {
            	type: 'polygon',
                data: [
                	[Date.UTC(2016, 1, 29), 100],
                	[Date.UTC(2016, 2, 20), 100],
                	[Date.UTC(2016, 2, 20), 110],
                   	[Date.UTC(2016, 1, 29), 110]
                ],
                color: 'rgba(0, 0, 0, 0.1)'
            }]
        });
    });
});