Chartjs time scale

Demonstrates problems with the chart.js time scale.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@next/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
 
    <title>Chart.js - Time series line chart</title>
</head>
<body>
    <canvas id="my-simple-chart"></canvas>
</body>
 
</html>

JavaScript

var data1 = {
  label: 's1',
  borderColor: 'blue',
  data: [{
      x: '2021-11-06 12:00:00',
      y: 50
    },
    {
      x: '2021-11-06 12:10:01',
      y: 91
    },
    {
      x: '2021-11-06 12:20:03',
      y: 45
    },
    {
      x: '2021-11-06 12:30:00',
      y: 45
    }
  ]
};

var ctx = document.getElementById('my-simple-chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [data1]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'minute',
          stepSize: 1,
          round: false,
          displayFormats: {
            minute: 'dd/MM HH:mm'
          }
        },
        ticks: {
                major: {
                    enabled: true,
                },
                font: context => {
                  if (context.tick && context.tick.major) {
                    return {
                      weight: 'bold'
                    };
                  }
                }
          }
      }
    }
  }
});