chartjs / chartjs/Chart.js

Y-labels cropped way too early for vertically stacked axes

Open
#11,746 0 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

The max allowed width for y-labels show be about 50% of chart width.
It works this way for side-by-side axes.

### Current behavior
![2](https://github.com/chartjs/Chart.js/assets/16407084/0ff9721c-07fe-473a-ae97-c3a1b8ba20fe)

If y-axes are stacked, this is not holds.

### Reproducible sample

https://codepen.io/jkmnt/pen/mdgzXVv

### Optional extra steps/info to reproduce

Resize the browser window to see the effect.

### Possible solution

It appears the chart.js always calculates the max allowed axis width as `chart width / 2 / number of axes` regardless of stacking enabled.

https://github.com/chartjs/Chart.js/blob/1777f959e5f4a80091dd89e798b239b7ba788eb5/src/core/core.layouts.js#L401

This picture confirms the suspision. Same chart as above, but without stacking.

![2](https://github.com/chartjs/Chart.js/assets/16407084/54b92921-35c7-4de8-ab2f-7fee686a9180)

The workaround I use now is the afterFit callback on every axis patching it width:

```typescript
afterFit: (axis) => {
const widest = (axis as any)._labelSizes?.widest?.width;
if (widest && axis.width < widest + 8) {
axis.width = widest + 8;
}
},
```

### Context

_No response_

### chart.js version

v4.4.2

### Browser name and version

_No response_

### 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.