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