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 : 550,
            marginTop : 130
        },
        
        navigator : {
            enabled : true,            
            xAxis : {
                opposite : true,
                gridLineWidth : 0,
                dateTimeLabelFormats : {
                    day: '%e %b',
                    week: '%e %b',
                    month: '%b %y'
                }
            },
            margin : 0,
            top : 60
        },

        rangeSelector : {
            enabled : false
        },

        title : {
            text : 'Volume Summary',
            align : 'left',
            style : {
                color : '#717571',
                fontSize : '12px',
                fontWeight : 'bold'
            }
        },
        
        xAxis : {
            gridLineColor : '#efefef',
            gridLineWidth : 0,
            dateTimeLabelFormats : {
                day: '%a<br/>%e %b',
                week: '%e %b',
                month: '%b %y'
            }
        },

        yAxis : [{
            title: {
                text: 'Latency',
                x: -15
            },
            labels: {
                x: -21,
                y: 4
            },
            lineWidth : 1,
            tickWidth : 1,
            gridLineColor : '#efefef',
            gridLineWidth : 0,
            min : 0,
            max : 10,
            offset : 3,
            height: 100
        }, {
            title: {
                text: 'IOPS',
                x: -15
            },
            labels: {
                x: -21,
                y: 4
            },
            lineWidth : 1,
            tickWidth : 1,
            gridLineColor : '#efefef',
            gridLineWidth : 0,
            min : 0,
            max: 140,
            top: 250,
            height: 100,
            offset : 3
        }],

   ...