Open jkmnt opened 2 months ago
The max allowed width for y-labels show be about 50% of chart width. It works this way for side-by-side axes.
If y-axes are stacked, this is not holds.
https://codepen.io/jkmnt/pen/mdgzXVv
Resize the browser window to see the effect.
It appears the chart.js always calculates the max allowed axis width as chart width / 2 / number of axes regardless of stacking enabled.
chart width / 2 / number of axes
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.
The workaround I use now is the afterFit callback on every axis patching it width:
afterFit: (axis) => { const widest = (axis as any)._labelSizes?.widest?.width; if (widest && axis.width < widest + 8) { axis.width = widest + 8; } },
No response
v4.4.2
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
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.
The workaround I use now is the afterFit callback on every axis patching it width:
Context
No response
chart.js version
v4.4.2
Browser name and version
No response
Link to your project
No response