Scale grid offset wrong when condensed (responsive) #12100
Description
Expected behavior
With the x scale grid offset set to true the vertical lines are between the ticks. Using a responsive chart resizing the canvas until not all tick labels fit will hide every other tick label (and rotate the remaining ones for some reason). Either show all vertical lines where they are supposed to be (after all, the lines still fit even if the labels don't), or hide every second vertical line, to correspond with hiding every second tick label.
Current behavior
Every second vertical line is hidden, but the remaining ones are no longer between ticks, but now go exactly through ticks, as if I had set grid offset to false. In this condensed view switching between grid offset true/false just changes which vertical lines going through ticks are hidden and which are shown, but they all go straight through the ticks.
Reproducible sample
https://codepen.io/leelenaleee/pen/WNyJXEe
Optional extra steps/info to reproduce
Use the following JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
stepped: 'middle'
}]
},
options: {
responsive: true,
scales: {
x: {
offset: true,
grid: {
offset: true
}
}
}
}
});
Now adjust the CSS max-width to, say, 300px.
Possible solution
No response
Context
No response
chart.js version
v4.5.0
Browser name and version
No response
Link to your project
No response