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 = -1 * n; i <= 0; i++) {
        data.push(Math.random() * 50);
    }
    return data;
}


var myLines = [{
    value: 100,
    width: 1,
    color: 'green',
    dashStyle: 'dash',
    label: {
        color: 'black',
        text: '100th value',
        align: 'middle',
        y: 75,
        x: 10
    }},{
    value: 500,
    width: 1,
    color: 'green',
    dashStyle: 'dash',
    label: {
        color: 'black',
        text: '500th value',
        align: 'middle',
        y: 75,
        x: 10
    }
        
    }];
var iter = 999;
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: 800,
        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: {
        buttons: [{
            type: 'minute',
            count: 1,
            text: '1M'},
        {
            type: 'minute',
            count: 5,
            text: '5M'},
        {
...