-
Hi, currently I have the following graph: Now, this is almost what I'm looking for. I just want to "reuse" the times on the y axis so the graph doesn't go up 24 hours each day but stays at around the same level. The y axis should only go from 12:00 AM to 12:00 AM. How can I do this? This is the code I use to produce this graph (using demo data to figure out what format the data should be in. I'm flexible to change the format of the real data if needed): new Chart(element, {
type: 'line',
data: {
labels: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-05'],
datasets: [
{
label: 'Time A',
data: [
new Date('2020-01-01').getTime() + 10 * 1000 * 60 * 60,
new Date('2020-01-02').getTime() + 13 * 1000 * 60 * 60,
new Date('2020-01-03').getTime() + 12.5 * 1000 * 60 * 60,
new Date('2020-01-05').getTime() + 9.25 * 1000 * 60 * 60,
],
},
{
label: 'Time B',
data: [
new Date('2020-01-01').getTime() + 20 * 1000 * 60 * 60,
new Date('2020-01-02').getTime() + 18 * 1000 * 60 * 60,
new Date('2020-01-03').getTime() + 17.5 * 1000 * 60 * 60,
new Date('2020-01-05').getTime() + 17.75 * 1000 * 60 * 60,
],
},
],
},
options: {
scales: {
x: { type: 'time', time: { unit: 'day' } },
y: { type: 'time', time: { unit: 'minute' } },
},
},
}) I've already tried removing the day (i.e. the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
I figure it's a good idea to use a custom format. I did the following now: new Chart(element, {
/* ... */
options: {
scales: {
x: {
type: 'time',
time: { unit: 'day' },
},
y: {
type: 'linear',
// The y axis uses numeric values between 0 and 24.
// "3" represents "03:00", "5.75" represents "05:45" etc.
min: 0,
max: 24,
ticks: {
// `stepSize: 1` shows "00:00", "01:00", "02:00" etc.
// `stepSize: 0.5` shows "00:00", "00:30", "01:00" etc.
stepSize: 1,
// This generates custom tick labels
callback(tickValue) {
if (typeof tickValue !== 'number' && typeof tickValue !== 'bigint') {
return undefined
}
// Turn "1.75" into "hours = 1" and "minutes = 45"
const hours = Math.floor(tickValue)
const minutes = (tickValue - hours) * 60
// Concatenate `hours` and `minutes` to get "01:45"
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
},
},
},
},
},
}) |
Beta Was this translation helpful? Give feedback.
I figure it's a good idea to use a custom format. I did the following now: