JSFiddle - React, Tailwind, and code Playground

by j3210938120

HTML

<div>
  <div id="c-container" class="chart" style="margin: auto; width: 50%;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>

<script src="https://code.highcharts.com/stock/indicators/indicators-all.js"></script>

<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/stock/modules/price-indicator.js"></script>
<script src="https://code.highcharts.com/stock/modules/full-screen.js"></script>

<script src="https://code.highcharts.com/stock/modules/stock-tools.js"></script>

JavaScript

var chartdata = []
        
        
        function ajaxCallFun(){
        
       //$.ajax
       //success: function ({

        for (var i=0; i < 20; i++)
        {
        	chartdata.push(
                        [(new Date()).getTime(),             //current time
                         Math.round(Math.random() * 100),    //open
                         Math.round(Math.random() * 100),    //high
                         Math.round(Math.random() * 100),    //low
                         Math.round(Math.random() * 100),    //close
                         Math.round(Math.random() * 100)     //volume
                        ]
                    );
        }
            return chartdata
        }

        Highcharts.setOptions({
           series: {
               boostThreshold: 1 // number of points in one series, when reaching this number, boost.js module will be used
          }
       })
        Highcharts.stockChart('c-container', {
            chart: {
                events: {
                load: function() {

                    // set up the updating of the chart each second
                    var chart = this,
                    series_data = this.series[0];
                    var series_volume = this.series[1];
                    setInterval(function() {     																												 
                        var raw_json = ajaxCallFun()
                        var date_, open_, high_, low_, close_, volume_
                        for ( i=0; i < raw_json.length; i+=1){
                        var date_= raw_json[i][0];
                        var open_= raw_json[i][1];
                        var high_= raw_json[i][2];
                        var low_= raw_json[i][3]; 
                        var close_= raw_json[i][4]; 
                        var volume_= raw_json[i][5];
                        series_data.addPoint([date_,open_,high_,low_,close_], false, false);
                        series_volume.addPoint([date_, volume_], false,...