Mixing line/bar chart types on a time scale leading to grid offset issues

[StrikeAgainst]

Context

I'm having a project where I'm rendering both a line and a bar type graph (each on their own linear scale on the Y axis) along a daily-ticked time scale on the X axis. v2 of chart.js was dictating to use a general type of bar for mixing both types, which had been working fine for me.

After migrating to v3 though, I've figured out an issue where the gridlines (or is it the ticks?) on the time scale wouldn't align to day change overs anymore, but being offset by 12 hours. This seems to be caused by the scale's offset option being automatically enabled when including a bar chart, but the issue isn't quite resolved when forcing the option to false. Further details can be found in this StackOverflow question I created.

Expected Behavior

Gridlines on the time scale should align to day change overs of the time scale, i.e. to 12:00am.

Current Behavior

Gridlines on the time scale align to 12:00pm of every day.

Possible Solution

I'm not even sure if the combination of line and bar charts on a time scale is even supposed to work, but it seems like the offset option needs to be reviewed for that case; maybe test if falsing it works correctly. Bar chart data on a time scale can also be offset by setting the time accordingly, in this case setting it to 12:00pm.

Steps to Reproduce

I have created a CodePen example which better clarifies the issue I'm having. The offset option is already explicitly set to false. If taking out the bar chart dataset, the gridlines align correctly.

Environment

• Chart.js version: 3.2.0
• Browser name and version: Mozilla Firefox 88.0

[kurkle]

There is a separate option for grid offset: https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

https://codepen.io/kurkle/pen/dyNEKVP