How can I reuse time on the y axis for different days on the x axis?

[alinnert]

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 new Date('...').getTime() + part) from the data. But this results in an error that tells me that the time difference between "beginning of epoch + a few hours" and "2020-01-01" is too large. So, that's not the solution.

[alinnert]

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')}`
          },
        },
      },
    },
  },
})