時系列チャート(Time)です。

data = [];
for (var i = 0; i <= 24; i++) {
  data[i] = {x: new Date(2021, 5, 23, i, 0, 0), y: Math.random() * 100 };
}
var ctx = document.getElementById('mychart-time');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Red',
      data: data,
      borderColor: '#f88',
    }],
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'hour',
          min: new Date(2021, 5, 23, 0, 0, 0),
          max: new Date(2021, 5, 24, 0, 0, 0),
          displayFormats: {
            hour: 'HH:mm',
          },
          tooltipFormat: 'HH:mm',
        },
      },
      y: {
        min: 0,
        max: 100,
      },
    },
  },
});

関連記事:

ダッシュボード(ADMIN) Chart.jsラインチャート(Line) Chart.js対数チャート(Logarithmic) Chart.js目盛を反転(Reverse) Chart.js棒チャート(Bar) Chart.js積み重ね棒チャート(Bar:Stack) Chart.jsパイチャート(Pie) Chart.jsドーナツチャート(Doughnut) Chart.js鶏頭図チャート(Polar) Chart.jsレーザーチャート(Radar) Chart.jsバブルチャート(Bubble) Chart.js散布図(Scatter) Chart.js複数軸(Multi Axis) Chart.jsプラグイン(Plugin) Chart.jsチャートを更新する(Update) Chart.jsデフォルト値を変更する Chart.jsインストール Chart.jsサンプル Chart.jsパラメータ Laravel-AdminLTEインストール Laravel-AdminLTEとlivewireインストール PHP-AdminLTEインストール