The dates in the x axis are showing times and time zones. I just want to show month and day.
function dateSeries(startDate, endDate) {
let dates = [];
let currentDate = new Date(startDate);
while (currentDate <= endDate) {
dates.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
return dates;
};
let ctx = document.getElementById('myChart');
let goal = [5,4,3,2,1,0];
let dates = dateSeries(new Date('2024-12-03'), new Date('2024-12-08'));
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Goal',
data: goal,
borderColor: 'rgba(142, 180, 227, 1)',
}
]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD'
}
}
}
}
}
});
It renders as:
I feel like my "options" code looks like all the examples I found, but I can't get the axis to format properly.
Update: Adapters
I didn't have any adapter defined. I thought I read that Chart.js has a default adapter, which I took to mean I didn't need a special one unless I needed something special. But I have no problem including one.
I changed to day: 'MMM dd'
and my stuff looks just like @kikon's fiddle, which clearly works. But mine still doesn't.
Script.js looks just like the above except for the change to the date format.
From your screenshot, you are using the old version of Chart.js (v2.8.0).
In summary
Version | Usage of Axis | Reference |
---|---|---|
v2 | x-axis: xAxes (array), y-axis: yAxes (array) |
Creating Multiple Axes |
v3 or later | x-axis: x (object), y-axis: y (object) |
3.x Migration Guide (Scale section) |
Hence, your configuration should be as follows for Chart.js v2.8.0.
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [
{
label: 'Goal',
data: goal,
borderColor: 'rgba(142, 180, 227, 1)',
},
],
},
options: {
scales: {
xAxes: [
{
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'MMM dd',
},
},
},
],
},
},
});
Otherwise, you need to follow the configuration in the JsFiddle link provided by @kikon in the comment for applying Chart.js v3 or later.