JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/stock2/js/highstock.src.js"></script>

<div id="container" style="height: 500px"></div>
<button id="setdata">set data</button>

JavaScript

randomData = function(){
    for(var i=0, d=[]; i<200; i++)
        d.push([Date.UTC(2011,0,i), Math.random()]);
    return d;
}

jQuery(function() {
    // Create the chart    
    var increase = 200;
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        
        rangeSelector: {
            selected: 1
        },
        
        title: null,
        legend: {
            enabled: true,
            verticalAlign: 'top'
        },
        xAxis: {
            maxZoom: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        
        series: [{
            name: 'USD to EUR',
            data: randomData()
        }]
    }, function(chart){
        
        $('button').click(function(){
           
           
                
            var item = [Date.UTC(2011,0,increase++), Math.random()]                
            chart.series[0].addPoint(item, true, true);
           
          
           
        });
    
    });
});