JSFiddle - React, Tailwind, and code Playground

HTML

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


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

JavaScript

$(function() {

	// Create a timer
	var start = + new Date();

	// Create the chart
	$('#container').highcharts('StockChart', {
		chart: {
			events: {
				load: function(chart) {
					this.setTitle(null, {
						text: 'Built chart in '+ (new Date() - start) +'ms'
					});
				}
			},
			zoomType: 'x'
		},

		xAxis: {
			type: 'line',
			labels: {
				formatter: function(){
					return this.value + ' mS';
				}		
			},
			startOnTick: false,
			endOnTick: false
		},
		
		navigator: {
			xAxis: {
				labels: {
					formatter: function(){
						return this.value + ' mS';
					}		
				}
			},
			height: 80
		},
		
		tooltip: {
			formatter: function() {
				return this.x + ' mS';
			}
		},

		yAxis: {
			title: {
				text: 'Channels'
			}
		},

		title: {
			text: 'Logic Analyzer'
		},
		
		plotOptions: {
			line: {
				marker: {
					// Show markers in plot (slowdown chart performance)
					enabled: false
				}
			}
		},
		
		rangeSelector: {
			enabled: false,
		},

		series: [{
			name: 'Channel 1',
			data: generateDoubleArray(1)
		}, {
			name: 'Channel 2',
			data: generateDoubleArray(2)
		}, {
			name: 'Channel 3',
			data: generateDoubleArray(3)
		}, {
			name: 'Channel 4',
			data: generateDoubleArray(4)
		}, {
			name: 'Channel 5',
			data: generateDoubleArray(5)
		}, {
			name: 'Channel 6',
			data: generateDoubleArray(6)
		}, {
			name: 'Channel 7',
			data: generateDoubleArray(7)
		}, {
			name: 'Channel 8',
			data: generateDoubleArray(8)
		}]

	});
});

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function generateDoubleArray(n){
    var arr = [[0,0]];
    for (var i = 0, l = 10000; i < l; i++) {
        arr.push([i, getRandomArbitrary(n, n+1)])
    }
    return arr;
}