Chart.js floating bar bug example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Chart.js floating bar bug example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <p>5 labels will show with x=1 in expected, but only 2 in bar chart</p>
  <p>also has problem with x=2</p>
  <canvas id="chart" style="width:800px;height:400px"></canvas>
</body>
</html>

JavaScript

const ctx = document.getElementById('chart');
new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [
      {
        label: 'meeting',
        data: [{ x: 1, y: [9, 10] }, { x: 2, y: [9, 10] }, { x: 3, y: [9, 10.5] }],
        backgroundColor: 'hsla(120, 70%, 55%, 0.6)',
      },
      {
        label: 'eating',
        data: [{ x: 1, y: [12, 13] }, { x: 2, y: [12, 13] }, { x: 4, y: [12, 13] }],
        backgroundColor: 'hsla(200, 70%, 55%, 0.6)',
      },
      {
        label: 'running',
        data: [{ x: 1, y: [18, 19] }, { x: 2, y: [18, 19] }, { x: 5, y: [18, 19] }],
        backgroundColor: 'hsla(30, 70%, 55%, 0.6)',
      },
      {
        label: 'learning',
        data: [{ x: 1, y: [14, 16] }, { x: 2, y: [14, 16] }],
        backgroundColor: 'hsla(280, 70%, 55%, 0.6)',
      },
      {
        label: 'calling',
        data: [{ x: 1, y: [10.5, 11.5] }, { x: 2, y: [10.5, 11.5] }],
        backgroundColor: 'hsla(40, 70%, 55%, 0.6)',
      },
    ]
  },
  options: {
    parsing: { xAxisKey: 'x', yAxisKey: 'y' },
    scales: {
      x: {
        min: 1,
        max: 30,
        type: 'linear',
        title: { display: true, text: 'Month' },
        ticks: { stepSize: 1 },
        categoryPercentage: 1.0,
        barPercentage: 0.8,
        stacked: true,
      },
      y: {
        min: 8,
        max: 24,
        ticks: { stepSize: 1 },
        reverse: true,
        title: { display: true, text: 'Hour' },
        stacked: true,
      }
    }
  }
});