Chart.js — Как создать временную диаграмму

Я создаю простой журнал сервера и хочу использовать Chart.js для создания отчетов об общем количестве обращений по часам, дням, месяцам или годам. Вот мой код:

import { ChartColors } from "$fresh_charts/utils.ts";
import Chart from "../../islands/chart.tsx";

const data = [
  { x: "2016-12-25", y: 20 },
  { x: "2017-12-26", y: 10 },
  { x: "2020-12-26", y: 10 },
  { x: "2024-12-26", y: 10 },
]
export default function ChartPage(props) {
  return (
    <div class = "p-4 mx-auto max-w-screen-md">
      <Chart
        type = "line"
        options = {{
          scales: {
            x: {
              type: "time",
              time: {
                "unit": "year",
              },
              displayFormats: {
                "year": "YYYY",
              },
            },
            y: { beginAtZero: true },
          },
        }}
        data = {{
          datasets: [
            {
              label: "Users",
              data: data,
              borderColor: ChartColors.Blue,
              borderWidth: 1,
            },
          ],
        }}
      />
    </div>
  );
}

Если я полностью закомментирую параметр масштаба по оси X, диаграмма будет сгенерирована нормально (хотя и с неправильным масштабом). Если я оставлю параметр масштабирования по оси X, его невозможно будет отобразить. Я знаю, что что-то неправильно настроил в Декартовой оси времени, но не могу в этом разобраться. Как заставить это работать?