24 hour x scale

[mariuszgit]

Hello everyone ;)
I've been trying to deal with the documentation all day but it's a bit overwhelming for me.
Could someone direct me and answer the question if it is possible to generate a graph that will resemble the one in the screenshot.

I would like to have only two labels "0:00" and "24:00" on the x-axis.
I will be grateful for any tips

[stockiNail]

Let's assume you are using cartesian time scale.
You could set min and max and implement a ticks.callback to draw only the min and max:

    scales: {
      x: {
        type: 'time',
        min: '0:00',
        max: '24:00',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'H:mm'
          },
        },
        ticks: {
          align: 'inner',
          callback(time) {
            if (time === this.min) {
              return this.format(time);
            } else if (time === this.max) {
              return '24:00'
            }
          }
        }
      }
    }

Here the codepen: https://codepen.io/stockinail/pen/vYVmWMb

[mariuszgit]

Wow. It looks fantastic! Thank You for Your response :)
Lets say: the first registry isnt starting exactly at 00:00:00 (like on the picture below)

The label with the time 0:00 disappears. Can we somehow fix this?

[stockiNail]

Yes, have a look again to codepen.

min: '00:00', insteadof 0:00

[mariuszgit]

You helped me a lot.
Now it's time to study and understand the code in its entirety.
thank You Very much! 🥇

[stockiNail]

Now it's time to study and understand the code in its entirety.

For you info, but I think you see in the codepen, I have used chartjs-plugin-gradient to set the gradient as background color. You can also use a scriptable option for that but I prefer using that plugin ;). That's my personal opinion, no mandatory for you.

[mariuszgit]

Yes. I noticed that after implementing this to my project.
At that moment I dont know how to use scriptable option - so I will stay for a while with the plugin option :)