i want the line graph to start at 12:00AM and end at 11:59pm in chart js - laravel

Question

i want my chart start at 12:00am and only draw the points when data avaiable. In most of my case data starts at 06:00am. now i want the chart look likes this.
i had generate the label from the created_at provide by the query. so, the label are equavalent to all the created_at present. My chart looks like this.
i want my label to start at 12:00Am but graph from the first created_at point. or null value can be replaced as 0.
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
let labels = {!! $labels !!};
Chart.defaults.scale.gridLines.drawOnChartArea = false;
Chart.defaults.global.title.display = true;
Chart.defaults.global.tooltips.intersect = false;
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.scale.ticks.maxTicksLimit = 21;
Chart.defaults.scale.ticks.maxRotation = 0;
Chart.defaults.scale.ticks.minRotation = 0;
Chart.defaults.global.defaultFontColor = "#bfbfbf";
var outdoor = new Chart(document.getElementById("outdoor").getContext('2d'), {
type: 'line',
showScale: false,
data: {
labels: labels,
datasets: [{
data: {{$activeGraph->pluck('status')}},
label: "Active Status",
borderColor: "#00F",
fill: false,
borderWidth: 1,
}]
},
options: {
title: {
text: 'Outdoor Temperature and Due Point'
},
customLine: {
color: 'black'
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
ticks: {
maxRotation: 0,
minRotation: 0
}
}]
}
},
</script>
my laravel code
$activeGraph = ActiveGraph::where('device_id', $id)->get();
$labels = $activeGraph->map(function ($model) {
return [$model->created_at->format('M-d') ,$model->created_at->format('h:i A')];
});
return view('devices.chart',compact('labels','activeGraph'))->with('device', $device);