Chart Time

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="hf4zsup7" width="400" height="200"></canvas>
<script>
  var ctx = document.getElementById("hf4zsup7").getContext("2d");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["00:30", "01:00", "01:30", "2:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00"],
      datasets: [{
        label: "CPU 1",
        data: [28, 45, 63, 36, 27, 69, 48, 29, 38, 52, 88, 21, 47, 35],
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.2)"
      }, {
        label: "CPU 2",
        data: [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65],
        borderColor: "rgb(54, 162, 235)",
        backgroundColor: "rgba(54, 162, 235, 0.2)"
      }]
    },
    options: {
      elements: {
        line: {
          tension: 0
        }
      },
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            parser: "mm:ss", //<- use 'parser'
            unit: 'minute',
            unitStepSize: 1,
            displayFormats: {
              'minute': 'mm',
            }
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });

</script>