Chart JS. I have configured my x axis to show the hours of the full date in data.labels. However, it still shows the original labels below

chart.js 4.4.2
date-fns 2.30
chartjs-adapter-date-fns” 3.0.0

I wanted to truancate the x-axis as it was labeling it in a YYYY:MM:DD HH:MM:SS. I achieved that via options.scales.x.ticks and options.scales.x.time. However, I am still displaying the orignal unwanted x axis.

import 'chartjs-adapter-date-fns';
import { enUS } from 'date-fns/locale';
import { ForecastObj } from './appTypes.types';

export async function renderChart(forecast: ForecastObj[]) {
  const chartCtr = document.querySelector('#temp-chart') as HTMLCanvasElement;

  new Chart(chartCtr, {
    type: 'line',
    options: {
      animation: false,
      scales: {
        xAxis: {
          adapters: {
            date: {
              locale: enUS,
            },
          },
          type: 'time',
          ticks: {
            stepSize: 3,
            major: {
              enabled: true,
            },
          },
          time: {
            unit: 'hour',
            tooltipFormat: 'HH:mm',
          },
        },
      },
    },
    data: {
      labels: forecast.map((row) => row.date),
      datasets: [
        {
          label: 'temp every 3 hrs',
          data: forecast.map((row) => row.temp),
        },
      ],
    },
  });
}

I would like to remove the lower x axis (the original).
Results