React Chart.js providing equal gap for xAxes showing formatted dates

Question

After adding displayFormats in scales.x, now my xAxes labels are having different gaps according to the data object it contains. How do I make my xAxes labels to be shown with equal gaps? The follow code is shown as follow image. Please remember that I still need to use displayFormats to format my data.

  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,
      },
    },
  };

Answer 1

You should define your x-axis as type: 'timeseries' as shown below:

options: {
  scales: {
    x: {
      type: 'timeseries',
      ...

For further information, please take a look at Time Series Axis in the Chart.js documentation.