chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.92k stars 11.89k forks source link

Y-labels cropped way too early for vertically stacked axes #11746

Open jkmnt opened 2 months ago

jkmnt commented 2 months ago

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

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

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;
      }
    },

Context

No response

chart.js version

v4.4.2

Browser name and version

No response

Link to your project

No response