JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var customMax;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
var xAxis = this.xAxis[0];
xAxis.customMax = xAxis.getExtremes().max;
console.log('bbb');
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
//xAxis.options.tickPositions.push(x);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPositioner: function(min,max){
var points = this.chart.series[0].processedXData,
len = points.length,
positions = [],
customMax = this.customMax,
i;
for(i = 0; i < len; i++) {
if(points[i] > customMax)
positions.push(points[i]);
}
return positions;
},
labels: {
rotation: -45,
...