Display real-time line chart

Basic Column Chart

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

// Helper function to format time in UTC
function formatDateToUTC(date, formatString) {
  var year = date.getUTCFullYear();
  var month = ("0" + (date.getUTCMonth() + 1)).slice(-2);
  var day = ("0" + date.getUTCDate()).slice(-2);
  var hours = ("0" + date.getUTCHours()).slice(-2);
  var minutes = ("0" + date.getUTCMinutes()).slice(-2);
  var seconds = ("0" + date.getUTCSeconds()).slice(-2);

  if (formatString)
    return formatString
      .replace("DD", day)
      .replace("MM", month)
      .replace("YYYY", year)
      .replace("HH", hours)
      .replace("mm", minutes)
      .replace("ss", seconds);
  else return `${hours}:${minutes}:${seconds} UTC`;
}

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    title: "Time",
    labelFormatter: function (e) {
      var date = new Date(e.value);
      return formatDateToUTC(date);
    },
    crosshair: {
      enabled: true,
      labelFormatter: function (e) {
        var date = new Date(e.value);
        return formatDateToUTC(date);
      },
    },
  },
  toolTip: {
    contentFormatter: function (e) {
      var date = new Date(e.entries[0].dataPoint.x);
      return (
        formatDateToUTC(date, e.entries[0].dataSeries.xValueFormatString) +
        "<br>Value: " +
        e.entries[0].dataPoint.y
      );
    },
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: new Date("2025-03-30T01:40Z"), y: 71 },
        { x: new Date("2025-03-30T01:45Z"), y: 55 },
        { x: new Date("2025-03-30T01:50Z"), y: 50 },
        { x: new Date("2025-03-30T01:55Z"), y: 65 },
        { x: new Date("2025-03-30T02:00Z"), y: 95 },
        { x: new Date("2025-03-30T02:05Z"), y: 68 },
        { x: new Date("2025-03-30T02:10Z"), y: 28 },
        { x: new Date("2025-03-30T02:15Z"), y: 34 },
        { x: new Date("2025-03-30T02:20Z"), y: 14 },
      ],
    },
    {
      type: "line",
      //toolTipContent: "X Value: {x} <br> Y Value:...