Javascript Reaction Chart.js为显示格式化日期的xax提供相同的差距

在scales.x中添加displayFormats之后，现在我的xAx标签根据它包含的数据对象有不同的间隙.如何使我的xAx标签以相等的间距显示？ 以下代码如下图所示. 请记住，我仍然需要使用displayFormats来格式化我的数据.

  const levelHistoryOptions = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        top: 20,
        bottom: 20,
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        color: theme.palette.primary.main,
        anchor: "end",
        align: "top",
        font: {
          size: 16, // Adjust the font size as needed
        },
        formatter: (value, context) => {
          return context.chart.data.datasets[context.datasetIndex].data[
            context.dataIndex
          ];
        },
      },
    },
    scales: {
      x: {
        type: "time",
        time: {
          unit: "day",
          displayFormats: {
            day: "MM월 dd일",
          },
        },

        offset: true,
        ticks: {
          source: "data",
          font: {
            size: 16,
          },
          color: theme.palette.primary.main,
        },
        grid: {
          color: theme.palette.mode === "dark" ? "#555" : "#ccc",
        },
        border: { color: theme.palette.mode === "dark" ? "#555" : "#ccc" },
      },
      y: {
        offset: true,
        display: false,
        beginAtZero: false,
      },
    },
  };