Apr 8, 2022
0
Level 1
date and time chart With Chart js
How can I create a table that shows Dates and times with Chart js?
I can use that with integer times(60, 50, etc.) but when I want to use string times like "12:00" or "08:00" in y, it doesn't work...
this is my code :
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let examChart = document.getElementById("myChart");
const dates=[
'2022-11-06',
'2022-11-07',
'2022-11-08',
];
let examLineChart = new Chart(myChart, {
type: "line",
data: {
labels:dates,
datasets: [{
data: [{
x: '2022-11-06',
y: '02:00'
},{
x: '2022-11-07',
y: '08:00'
},{
x: '2022-11-08',
y: '06:00'
},
]
}],
},
options: {
label: "placeholder",
scales: {
x: {
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
},
y: [{
type: 'time',
time: {
parser: 'HH:mm',
unit: 'hour',
stepSize: 1,
displayFormats: {
hour: 'HH:mm'
},
tooltipFormat: 'HH:mm'
},
ticks: {
min: '00:00',
max: '08:00'
}
}]
},
}
});
</script>
Please or to participate in this conversation.