ChartJS: Full Date for xAxis Labels? - chart.js

Question

I was been working on a timescale line chart, and noticed that when the all the data points are close enough together, the xAxis labels automatically convert to just time. I have tried different xAxis time units with no success.
Here is a simply codepen example in which the xAxis labels are by hour. If you change a moment to be March instead of April, the xAxis labels are by date.
Is there a way to force the xAxis labels to always be date AND time?
xAxes: [{
type: 'time',
time: {
parser: timeFormat,
// unit: 'day',
// unit: 'hour',
tooltipFormat: 'll HH:mm'
},
https://codepen.io/ccwakes/pen/abvzewW
Thanks

Answer 1

You can use property time.displayFormats according to Display Formats from Chart.js documentation. See Moment.js for the allowable format strings.
time: {
unit: 'hour',
displayFormats: {
hour: 'MMM DD HH:mm'
},
tooltipFormat: 'MMM DD HH:mm'
}
Please have a look at your amended code below.
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1',
backgroundColor: 'red',
borderColor: 'red',
fill: false,
data: [
{ x: '2020-04-10 13:00', y: 60 },
{ x: '2020-04-12 06:00', y: 100 },
{ x: '2020-04-12 13:00', y: 5 }
],
}, {
label: 'Dataset 2',
backgroundColor: 'blue',
borderColor: 'blue',
fill: false,
data: [
{ x: '2020-04-10 13:00', y: 45 },
{ x: '2020-04-11 13:00', y: 65 },
{ x: '2020-04-12 06:00', y: 80 },
{ x: '2020-04-12 13:00', y: 65 }
]
}]
},
options: {
title: {
text: 'Time Scale'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'MMM DD HH:mm'
},
tooltipFormat: 'MMM DD HH:mm'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>