Chart.JS - Configure x axis to show the hours of the full date in data.labels but it still shows the original labels below

Question

chart.js: 4.4.2

date-fns: 2.30

chartjs-adapter-date-fns: 3.0.0

I wanted to truncate the x-axis as the dates were labeled in "YYYY:MM:DD HH:MM:SS" format. I achieved that via options.scales.x.ticks and options.scales.x.time. However, I am still displaying the original x-axis which is unnecessary.

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).

Answer 1

As you use xAxis, it creates another x-axis instead of replacing the original x-axis. You should use x as scaleId instead of xAxis.

scales: {
  x: {
    ...
  }
}

Demo @ StackBlitz

Reference: Default scales