JSFiddle - React, Tailwind, and code Playground

HTML

<script src="Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


  <body>
    <h1>Hello!</h1>
    <canvas id="myChart" width="400" height="200"></canvas>
  </body>

JavaScript

// Hello there

var ajaxCallLiveSubs = function(){

    // endopoint
    var url = 'https://jsonplaceholder.typicode.com/posts/1';

    var interval = 5000;

    var time = 0;

    // Live Subs Charts
    var ctx_live = document.getElementById("myChart");

    var liveChart = new Chart(ctx_live, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                data: [],
                borderWidth: 1,
                borderColor:'#00c0ef',
                label: 'liveCount',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                    }
                }]
            }
        }
    });


    var doAjax = function() {

        $.ajax({
                    url: url,
                    success: function(){
                        var currentTime = ++time
                        var currentValue = Math.random()*1000;
                        liveChart.data.labels.push(currentTime);
                        liveChart.data.datasets[0].data.push(currentValue);
                        
                        liveChart.update();

                    },
                    complete: function () {
                            // Schedule the next
                            setTimeout(doAjax, interval);
                    }
                });
    };

    doAjax();




};

ajaxCallLiveSubs();