Time scale combo chart X axis labels off by one

[pkariz]

Expected behavior

in the example shown in the documentation the first label on the X-axis should be Nov 18 and the last one should be Nov 24. While that holds for both bars and line if you mouse over their data, the X axis shows the next day.

Current behavior

It shows the next day, so where bars and line show Nov 18, the X axis shows Nov 19. The last label on the X-axis is not shown when it should be (and have the same value as bars/line, so Nov 24).

Reproducible sample

https://www.chartjs.org/docs/latest/samples/scales/time-combo.html

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.0.1

Browser name and version

No response

Link to your project

No response

[kurkle]

The scale ticks are at midnight while the data has current time in it. So it depends on the time of day. Maybe the Utils.newDate should set time to midnight?

[pkariz]

i've tried setting the time to 00:00:00 and what i get is the correct labels except the first label is now missing instead of the last one. So 19. nov data is there but there is no 19. Nov label, 20. nov data is there and label is correctly set to 20. Nov.

Just to elaborate more on what i'm trying to achieve. I have data A, B and C, where each of them is the amount of A/B/C per specific day and B and C are similar in a way that they're like "competitors", so i want to show A as a line, B and C as bars. All of course showing data on specific day

[vanHekthor]

@pkariz I agree that the way it is right now is quite confusing as it looks wrong at first (https://www.chartjs.org/docs/latest/samples/scales/time-combo.html)

Only after a quite a while I realized that 00:00:00 of each day is in the center between the grid lines.
Moreover, in the other time scale example the date labels are positioned differently (00:00:00 where the vertical grid lines are):

Maybe the config could be changed slightly?

2 ideas come into my mind:

Idea 1

Basically doing what kurkle suggested and adding:

...
scales: {
  x: {
    ...
    time: {
      ...
      round: 'day',
    },        
  },
},
...

Idea 2

Moving the 00:00:00 of each day to the position of the vertical grid lines:

...
scales: {
  x: {
    ...
    grid: {
      offset: false,
    }
  },
},
...

@kurkle If appreciated, I can do a PR with the preferred option.

[mukham12]

Greetings,

Is this issue not similar to the recently resolved matter documented in issue #11229, accompanied by pull request #11284? Both issues revolve around the problematic exhibition of tooltips caused by the misalignment of bar stacks within their respective ticks in the bar chart. Considering the correlation between the two cases, is it a good idea to close this issue, given that the proposed pull request has been successfully merged?

Many thanks.