Displaying min/max range in hours Chart.js - chart.js

Question

I am having some issues when I am trying to display a min/max range of hours in the x-axis of a bar graph with Chart.js. Now it is showing the whole time range of 24 hours. I want the range to be between 06:00-23:00, but I can only access this if I declare a specific daterange aswell like this:
xAxes: {
ticks: {
},
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm',
},
},
min: '2022-10-21T06:00:00',
max: '2022-10-21T23:00:00',
},
But I want to display the time range, without having to declare a date range, and I thought it would be logic to declare it like this, but it is not:
min: 'YYYY-MM-DDT06:00:00',
max: 'YYYY-MM-DDT23:00:00',
Does anyone have any ideas how to solve this?
How I want it to be displayed

Answer 1

max and min are defined directly on the axis but not inside the time option.
For further information, consult Min Max Configuration from the Chart.js documentation.
Please take a look at below runnable code snippet and see how it works.
new Chart('chart', {
type: 'bar',
data: {
datasets: [{
label: '# of Votes',
data: [
{x: '2022-10-03T07', y: 10},
{x: '2022-10-03T08', y: 15},
{x: '2022-10-03T10', y: 8},
{x: '2022-10-03T12', y: 12},
{x: '2022-10-03T13', y: 13},
{x: '2022-10-03T18', y: 7}
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'HH:mm',
},
tooltipFormat: 'd MMM yyyy HH:mm'
},
min: '2022-10-03T06',
max: '2022-10-03T23'
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="chart" height="85"></canvas>