JSFiddle - React, Tailwind, and code Playground

by fabienpenso

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: 300px; min-width: 300px"></div>

JavaScript

$(function() {
	// Create the chart
	$('#container').highcharts({
		chart : {
            type: 'area',
            plotBorderWidth: 0,
			events : {
				load : function() {

					// set up the updating of the chart each second
					var series = this.series[0];
					setInterval(function() {
						var x = (new Date()).getTime(), // current time

                        // Previous value +/- 10 max
                        y = Math.round(series.data.slice(-1)[0]['y'] +                                        (Math.random() * 10 * (Math.round(Math.random()) * 2 - 1)));
                        if (y < 0) 
                            y = -y
						series.addPoint([x, y], true, true);
					}, 1000);
				}
			}
		},
		
		title : {
			text : 'Live random data'
		},
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            gridLineWidth: 0.3,
            title: {text: ""}
        },
        plotOptions: {
            area: {
                fillOpacity: 0.35,
                states: {
                            hover: {
                                enabled: false
                            }
                        },
                marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 2
                    }
            }
        },
        legend: { enabled: false },
        credits: { enabled: false },
		series : [{
			name : 'Random data',
            lineWidth: 2,
			data : (function() {
				// generate an array of random data
				var data = [], time = (new Date()).getTime(), i;
                var previous;
				for( i = -60; i <= 0; i+=1) {
					data.push([
						time + i * 1000,
						Math.round(Math.random() * 100)
					]);
				}
				return data;
			})()
		}]
	});

});