JSFiddle - React, Tailwind, and code Playground

HTML

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

<div style="width:75%; text-align:right; font-size:14px;">
	y: <span id="value">	0  </span>		
</div>

<div id="container" style="width:80%; height:450px;"></div>

JavaScript

var prevY = 0;
var data = [];
var time = (new Date()).getTime(), i;

// Getting first data, show as diagonals
for (i = -19; i <= 0; i++) {
	data.push({
		x: time + i * 1000,
		y: Math.round(Math.random() * 11)
	});
}
                 	
$(function () {

	$(document).ready(function() {

		Highcharts.setOptions({
			xAxis: {
                ordinal: false,
				type: 'datetime',
				lineColor: '#EEEEEE',
				tickColor: '#EEEEEE',
				gridLineColor: '#EEEEEE',
				minorGridLineColor: '#FFFFFF', // Zwischenlinien weiss, d.h. unsichtbar				
				gridLineWidth: 1,
				minRange: 1 * 60 * 1000,
				range: 3 * 60 * 1000,
				labels: {
					enabled: true
				}
			},
			yAxis: {				
				opposite: true				
			},
																
		});	
		
 

		$('#container').highcharts('StockChart',{
			chart: {
				events: {
					load: function() {
						var chart = this;
						var series = this.series[0];                        	    

						setInterval(function() {

							var xTime = (new Date()).getTime(); // current time                        	
							var y = Math.round(Math.random() * 11);
							series.addPoint([ xTime, prevY ], false);									
							series.addPoint([ xTime, y ], false);
							chart.xAxis[0].setExtremes( chart.xAxis[0].min, chart.xAxis[0].max);
							document.getElementById('value').innerHTML = y;
							prevY = y;
						},   1000);
					}
				}
			},

			series: [{
				name: 'series',
				type : 'area',
				color: 'rgba(026, 089, 184, 1)',
				fillColor: 'rgba(200, 221, 251, 0.5)', // nicht mit # Hexcode angeben, sonst funktioniert Opacity (Durchsichtigkeit) nicht                
				data: data
			}]
		});
		
	});
	
});