JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {


    $('#container').highcharts({

        chart: {
            type: 'areasplinerange',
            events: {
                load: function () {
var chart = this;
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function () {
console.log(chart);
                        
                        shift = chart.series[0].data.length > 15;
                        var a = (new Date()).getTime(),
                            b = Math.random() * 100,
                            c = Math.random() * 100,
                            e = Math.random() * 10,
                            f = Math.random() * 10;

                        chart.series[0].addPoint([a, c - f, c + f], true, shift);
                    }, 1000);
                }
            }
        },

        title: {
            text: 'Temperature variation by day'
        },
        xAxis:{
            type:'datetime'
        },
        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [[1368695251926,9,18],[1368695252926,1,8]]
        }]
    });

});