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({
global : {
useUTC : false
},
lang: {
months: ['Jan.', 'Feb.', 'März', 'April', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
decimalPoint: ',',
thousandsSep: '.'
},
navigation: {
buttonOptions: {
align: 'left'
}
},
navigator: {
enabled: true,
top: 388,
outlineColor: '#C0C0C0',
outlineWidth: 1
},
tooltip: {
enabled: true,
xDateFormat: '%d.%m.%Y %H:%M:%S'
},
credits: {
enabled: false
},
title: {
text : ''
},
xAxis: {
type: 'datetime',
lineColor: '#EEEEEE',
tickColor: '#EEEEEE',
gridLineColor: '#EEEEEE',
minorGridLineColor: '#FFFFFF',
labels: {
enabled: true
}
},
yAxis: {
lineColor: '#EEEEEE',
tickColor: '#EEEEEE',
gridLineColor: '#EEEEEE',
opposite: true,
offset: 5,
lineWidth: 1,
tickWidth: 1,
minorGridLineWidth: 0,
title: {
enabled: false
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 1,',','.');
}
}
},
plotOptions: {
series: {
lineWidth: 1,
//threshold: null,
showInLegend : false,
marker: {
enabled: false,
radius: 2
}
}
}
});
$('#container').highcharts({
chart: {
events: {
load: function() {
var chart = this;
var series = this.series[0];
setInterval(function() {
var xTime = (new Date()).getTime(); // current time ...