chartjs / chartjs/Chart.js

rotated x-axis ticks shifting to the left when updating v3.9.1 to v4.2.1

Open
#11,197 2 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

No changes in the visual positioning of the ticks on the x-axis.

Note: this only occurs to ticks that are rotated - horizontal ticks are not affected.

Looking at the defaults for v3.9.1 and v4.2.1 they are identical ([3.9.1](https://www.chartjs.org/docs/3.9.1/axes/cartesian/#common-tick-options-to-all-cartesian-axes) and [4.2.1](https://www.chartjs.org/docs/latest/axes/cartesian/#common-tick-options-to-all-cartesian-axes)

### Current behavior

When updating from v3.9.1 to v4.2.1 I've spotted a notable shift in my x axis ticks its about 5px to the left, making them feel un-aligned
v3.9.1
![Screenshot 2023-03-21 at 11 20 55](https://user-images.githubusercontent.com/9541902/226591579-dc4d4226-a009-4e2a-a917-a2c36b19447e.png)

v4.2.1
![Screenshot 2023-03-21 at 11 20 13](https://user-images.githubusercontent.com/9541902/226591626-471d1493-cf49-44fb-ae8e-7a1283ad73d1.png)

I tried to use labelOffset to move it back but this makes text that is fully horizontal to be un-aligned.
align and crossAlign appear to do nothing to the design on any option where the text is rotated.

This issue seems to only affect rotated text in my case.

crossAlign and align appear only work on text is fully horizontal.

Adding 'showLabelBackdrop: true' - seems to fix this alignment bug - feels hacky but better than align as it only effects rotated text alignment and not horizontally aligned text.

This is the config used before and after upgrade

``` javascript
scales: {
x: {
stacked: false,
display: true,
grid: {
display: false,
},
ticks: {
autoSkip: false,
color: colors.darkGrey,
font: {
family: "Roboto",
},
padding: 6,
},
beginAtZero: true,
min: 0,
},
}
```

### Reproducible sample

https://codepen.io/jamiecarter7/pen/GRXYNJG

toggle versions on the left - you can see a movement in the ticks to the left on v4.2.1

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

_No response_

### chart.js version

v4.2.1

### Browser name and version

Chrome

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.