JSFiddle - React, Tailwind, and code Playground

by jdmyers

HTML

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

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

JavaScript

$(document).ready(function() {
    var chart1 = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            height: 590,
            marginTop: 150,
            marginLeft: 55
        },

        navigator: {
            enabled: true,
            maskFill: 'rgba(235, 235, 235, 0.75)',
            xAxis: {
                opposite: true,
                gridLineWidth: 1,
                gridLineColor: '#EEEEEE',
                tickWidth: 1,
                tickLength: 25,
                tickColor: '#EEEEEE',
                dateTimeLabelFormats: {
                    day: '%e %b',
                    week: '%e %b',
                    month: '%b %y',
                    year: '%Y'
                },
                labels: {
                    x: 5,
                    y: -15
                }
            },
            series: {
                type: 'line'
            },
            outlineWidth: 1,
            outlineColor: '#BDBDBD',
            top: 60,
            handles: {
                borderColor: '#BDBDBD',
                backgroundColor: '#EEEEEE'
            }
        },

        rangeSelector: {
            enabled: false
        },

        title: {
            text: 'Volume Summary',
            align: 'left',
            style: {
                color: '#717171',
                fontSize: '12px',
                fontWeight: 'bold'
            }
        },

        xAxis: {
            gridLineWidth: 0,
            lineColor: '#BDBDBD',
            dateTimeLabelFormats: {
                hour: '%a %m/%e<br/>%l %p',
                day: '%a<br/>%e %b',
                week: '%e %b',
                month: '%b %y',
                year: '%Y'
            },
            labels: {
                align: 'left',
                y: 23
            },
            tickWidth: 1,
            tickLength: 7
        },

        yAxis: [{
            title: {
                text: 'Latency',
                x: 0
           ...