In Angular - Chart.js scatter chart with time-based y-axis not starting at 00:00 AM

I'm using an Angular component to render a scatter chart using Chart.js. My data looks like this:

const myData = [
{ x: 1754863200000, y: 1754889011000 },
{ x: 1752184800000, y: 1752210611000 },
{ x: 1750111200000, y: 1750151628000 },
{ x: 1750111200000, y: 1750173515000 }
];



And I'm passing it to the component like this:

<app-scatter-chart
[heading]="'EPISODE BY DATE'"
[dataPoints]="myDynamicData"
[datasetLabel]="'Hospital visits'"
[pointColor]="'#36A2EB'">
</app-scatter-chart>


My chart configuration for the y-axis (time of day) is:

scales: {
y: {
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'h:mm a'
},
tooltipFormat: 'h:mm a'
},
title: {
display: true,
text: 'Time of Day'
},
ticks: {
color: '#666',
source: 'data',
callback: function (value) {
return new Date(Number(value)).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
});
}
},
grid: {
color: '#f0f0f0'
},
// I tried adding min: new Date(...), but points are not visible
}
}


I want the y-axis to start from 00:00 AM instead of the earliest data point. When I try to set the min property for the y-axis, none of my points are visible.



And Time label are shown twice

Continue reading...