We want you to keep your hair 🙂

Try the following 2 Options for latest version of Chart.js

Chart.js v3.2.1 (not backwards compatible with v2.xx)

Option 1:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   // gets you the latest version of Chart.js, now at v3.2.1

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
   // You need moment.js and adapter for time or timeseries to work at x-Axis


<div style="width: 500px; height: 500px">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>


<script>
const startDate = new Date(1619701200*1000);
    // first label from your data, times 1000 to get milliseconds,
    // for last 24 hours from now, see further down below

const myLabels = [];
let nextHour = startDate;

let i = 0; // tip: declare i outside for-loop for better performance

for (i; i < 24; i++) {
  nextHour = new Date((1619701200 + (i*3600)) *1000);
  myLabels.push(nextHour);
};

const ctx = document.querySelector('canvas').getContext('2d');

const myChart3x = new Chart(ctx, {
    type: 'line',
    data: {
        labels: myLabels,
        datasets: [{
          data: [41,9,21,80,277,151,68,88,82,48,12,1,97,36,81,21,63,49,44,15,10,44,81,4,9],
          label: "Views",
          borderColor: "#3e95cd",
          fill: false
        },
        {
          data: [1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,1,1],
          label: "Visitors",
          borderColor: "#3e95cd",
          fill: false
        }
        ]
    },
    options: {
      scales: {
        x: {
          type: 'timeseries',
          time: {
            unit: 'hour',  // <-- that does the trick here
            displayFormats: {
              hour: 'D-M-Y H:00:00'
            },
            tooltipFormat: 'D-M-Y H:00:00'  // <-- same format for tooltip
          }
        },
        y: {
          min: 0
        }
      }
    }
  });

</script>

And this is what your chart would look like:

If you want to calculate dynamically the last 24 hours from now for your x-Axis, I would suggest to use moment.js instead:

<script>
   // ...

const startDate = moment().subtract(1, 'd');

const myLabels = [];
let nextHour = startDate;
let i = 0;

for (i; i < 24; i++) {
  nextHour = moment().add(i, 'h');
  myLabels.push(nextHour);
}; 

   // ....
</script>

Also, be aware that moment.js uses slightly different formatting string:

'D-M-Y H:00:00' instead of 'd-m-Y H:00:00'

Option 2:

If you have your data in json-format

data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]

like your first code snippet on top, using min and max at x-Axis: (Advantage: you don’t have to define labels-array for x-Axis)

<script>

const ctx = document.querySelector("canvas").getContext("2d");

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      label: "Views",
      data: [{x:1620237600000,y:41},{x:1620241200000,y:9},{x:1620244800000,y:21}]
      // x-value without quotes (has to be a number) 
      // and multiply by 1000 to get milliseconds
    },
    {
      label: "Visitors",
      data: [{x:1620237600000,y:1},{x:1620241200000,y:1},{x:1620244800000,y:2}]
    }]
  },
  options: {
    scales: {
      x: {
        type: "time",  // <-- "time" instead of "timeseries"
        min: Date.now() - (24 * 60 * 60 * 1000),
        max: Date.now(),
        time: {
          unit: "hour",  // <-- that does the trick here
          displayFormats: {
            hour: "D-M-Y H:00:00"
          },
          tooltipFormat: "D-M-Y H:00:00"// <-- same format for tooltip
        }
      },
      y: {
        min: 0,
        max: 100
      }
    }
  }
});
</script>

You should get the following:

I hope I understood correctly your need and hope this helps.