JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://canvasjs.com/assets/script/canvasjs.min.js'></script>
    <script type='text/javascript'>
      var dataPoints = [];
      var chart;
      $.getJSON('https://trionacgm.fly.dev/api/v1/entries.json?count=12', function(data) {
        $.each(data, function(key, value) {
          dataPoints.push({
            x: (value)['date'],
            y: Number(value['sgv'])
          });
        });
        chart = new CanvasJS.Chart('chartContainer', {
          title: {
            text: 'Live Chart with dataPoints from External JSON'
          },
          zoomEnabled: true,
          axisX: {

          },
          data: [{
            showInLegend: true,
            markerType: 'circle',
            markerSize: '5',
            xValueType: 'dateTime',
            xValueFormatString: 'YYYY - MM - DD HH: mm: ss',
            toolTipContent: 'SGV: {y}',
            type: 'line',
            dataPoints: dataPoints,
          }]
        });
        chart.render();
        updateChart();
      });

      function updateChart() {
        $.getJSON('https://trionacgm.fly.dev/api/v1/entries.json?count=12', function(data) {
          chart.options.data[0].dataPoints = [];
          $.each(data, function(key, value) {
            chart.options.data[0].dataPoints.push({
              x: (value['date']),
              y: Number(value['sgv'])
            });
          });
          chart.render();
        });
      }
      setInterval(function() {
        updateChart()
      }, 1000);


    </script>
  </head>

  <body>
    <div id='chartContainer' style='height: 360px; width: 100%;'></div>
  </body>

</html>