JSFiddle - React, Tailwind, and code Playground

by Fusher

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>
<div id="container"></div>

JavaScript

var height = 100;

function newRandomData(n) {
    // generate an array of random data
    var data = [],
        time = (new Date()).getTime(),
        i;

    for (i = 0; i <= n; i++) {
        data.push([times[i], Math.random() * 50]);
    }
    return data;
}


var myLines = [{
    value: Date.UTC(2012,4,16),
    width: 1,
    color: 'green',
    dashStyle: 'dash',
    label: {
        color: 'black',
        text: '16th of the May value',
        align: 'middle',
        y: 75,
        x: 10
    }},
{
    value: Date.UTC(2012,4,16) + 12*3600*1000,
    width: 1,
    color: 'green',
    dashStyle: 'dash',
    label: {
        color: 'black',
        text: 'twenty hours later value',
        align: 'middle',
        y: 75,
        x: 10
    }

    }];
var iter = 99999;
var times = [];
var time = (new Date()).getTime();

for (i = -1 * iter; i <= 0; i++) {
    times.push(time + i * 1000);
}

var myHighChart = [{
    data: newRandomData(iter),
    yAxis: 0

    },
{
    data: newRandomData(iter),
    yAxis: 1

    },
{
    data: newRandomData(iter),
    yAxis: 2

    },
{
    data: newRandomData(iter),
    yAxis: 3

    }];

var dateflow = myHighChart[1].data;


chart = new Highcharts.StockChart({

    //***********************
    chart: {
        renderTo: 'container',
        height: 700,
        alignTicks: true
    },

    //***********************       
    plotOptions: {
        series: {
            cursor: 'pointer',
            animation: {
                duration: 2000
            },
            events: {
                click: function() {
                    alert(this.name);
                }
            }
        },
        dataLabels: {
            enable: true,
            align: 'right',
            color: 'red'
        }
    },
    //***********************    
    navigator: {
        maskFill: 'rgba(180, 198, 220, 0.75)',
        series: {
            data: dateflow
        }
    },
    //***********************
    rangeSelector: {
       ...