JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/highslide-software/highcharts.com/master/js/adapters/standalone-framework.src.js"></script>
<script src="http://code.highcharts.com/3.0/highcharts.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
CSS
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/> <link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
JavaScript
(function () {
var refreshRate = 0.05 * 1000,
interval,
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
animation: false,
},
series: [{
data: [12],
dataLabels: {
enabled: false
},
}],
tooltip: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
max: 140,
min: 0,
gridLineWidth: 0
}
});
document.getElementById("start").addEventListener('click', function () {
interval = setInterval(function () {
//chart.series[0].remove();
//chart.addSeries({data: [Math.random() * 100, Math.random() * 100, Math.random() * 100]});
chart.series[0].setData([Math.random() * 100], false);
chart.redraw();
}, refreshRate);
}, false);
document.getElementById("stop").addEventListener('click', function () {
clearInterval(interval);
}, false);
})();