fix(grid): respect axisLabel.width when containLabel is true

[Rohitgiri02]

Previously, when grid.containLabel was set to true, the grid layout calculation used the actual text width instead of the configured axisLabel.width, causing incorrect layout when overflow was set to 'truncate'.

This fix checks if axisLabel.width is configured and uses that value for grid layout calculation, ensuring consistent behavior.

Fixes #16111

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fix grid layout calculation to respect axisLabel.width configuration when grid.containLabel is enabled and overflow is set to 'truncate'.

Fixed issues

• It doesn't work correctly when I set grid.containLabel:true and yAxis.axisLabel.overflow  #16111: Grid doesn't respect axisLabel.width when containLabel is true

Details

Before: What was the problem?

When grid.containLabel was set to true and yAxis.axisLabel.width was configured with overflow: 'truncate', the grid layout calculation incorrectly used the actual text width instead of the configured width value. This caused the grid to reserve too much space for axis labels, resulting in incorrect chart layout.

Example of the bug:

// xAxis use proportion on x, yAxis use proprotion on y, otherwise not.
fillMarginOnOneDimension(labelInfo.rect, xyIdx, proportion);
fillMarginOnOneDimension(labelInfo.rect, 1 - xyIdx, NaN);

In this case, the grid would reserve space based on the full text width (e.g., 500px) instead of the configured 300px, causing layout issues.

After: How does it behave after the fixing?

The grid layout calculation now correctly:

1. Checks if axisLabel.width is configured
2. Uses the configured width value for grid margin calculation when available
3. Handles both string and number types for the width value
4. Falls back to actual text width when no width is configured

After the fix:

• Grid correctly reserves 300px as configured
• Layout is consistent with the user's intention
• Text is properly truncated at the specified width

Implementation:
Modified the fillLabelNameOverflowOnOneDimension function in src/coord/cartesian/Grid.ts to retrieve the configured axisLabel.width and apply it to the label rect before margin calculation.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR does not use security-sensitive Web APIs.

ZRender Changes

• This PR does not depend on ZRender changes.

Related test cases or examples to use the new APIs

Manual test case added: test/bug-16111.html

This test demonstrates the fix by showing a chart with:

• grid.containLabel: true
• yAxis.axisLabel.width: 300
• yAxis.axisLabel.overflow: 'truncate'
• Long Chinese text that exceeds 300px

Before the fix, the grid would overflow. After the fix, it correctly respects the 300px width.

Merging options

• Please squash the commits into a single one when merging.

Other information

This is my first contribution to Apache ECharts. The fix is minimal and focused on the specific issue - it only affects grid layout calculation when both containLabel: true and axisLabel.width are configured together.

The fix properly handles type conversion from string | number to number and only applies to y-axis labels (where width is the relevant dimension for horizontal layout).

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

[Justin-ZS]

I tried the demo in #16111, and it seems to work as expected on my end.
Could you provide more details about the issue you're experiencing?

[Rohitgiri02]

i tried to reproduce

I tried the demo in #16111, and it seems to work as expected on my end. Could you provide more details about the issue you're experiencing?

When grid.containLabel was set to true and yAxis.axisLabel.width was configured with overflow: 'truncate', the grid layout calculation incorrectly used the actual text width instead of the configured width value. This caused the grid to reserve too much space for axis labels, resulting in incorrect chart layout.

before the fix

after the fix you can see the right side of label

[Justin-ZS]

i tried to reproduce

I tried the demo in #16111, and it seems to work as expected on my end. Could you provide more details about the issue you're experiencing?

When grid.containLabel was set to true and yAxis.axisLabel.width was configured with overflow: 'truncate', the grid layout calculation incorrectly used the actual text width instead of the configured width value. This caused the grid to reserve too much space for axis labels, resulting in incorrect chart layout.

before the fix after the fix you can see the right side of label

This caused the grid to reserve too much space for axis labels, resulting in incorrect chart layout.
I can't find any extra blank spaces. Could you add some markers to emphasize the incorrect blank spaces?

[Rohitgiri02]

ou add some m

you need to change the width to 300px or more to see the extra blank space to reproduce just open the demo and copy paste the code

option = {
grid: {
left: 0,
top: 0,
bottom: 0,
containLabel: true,
},
yAxis: {
axisLabel: {
align: 'right',
width: 300,
overflow: 'truncate',
ellipsis: '...',
},

type: 'category',
data: [
  'There is a problem with this paragraph, I expect the length of containLabel to be based on yAxis.axisLabel.width instead of the actual text width',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sun',
],

},
xAxis: {
type: 'value',
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
},
},
],
};

make sure to copy paste it correctly to see extra blank;

[Justin-ZS]

ou add some m

you need to change the width to 300px or more to see the extra blank space to reproduce just open the demo and copy paste the code

option = { grid: { left: 0, top: 0, bottom: 0, containLabel: true, }, yAxis: { axisLabel: { align: 'right', width: 300, overflow: 'truncate', ellipsis: '...', },

type: 'category',
data: [
  'There is a problem with this paragraph, I expect the length of containLabel to be based on yAxis.axisLabel.width instead of the actual text width',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sun',
],

}, xAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)', }, }, ], };

make sure to copy paste it correctly to see extra blank;

It still looks fine on my side. demo

[Rohitgiri02]

ou add some m

you need to change the width to 300px or more to see the extra blank space to reproduce just open the demo and copy paste the code
option = { grid: { left: 0, top: 0, bottom: 0, containLabel: true, }, yAxis: { axisLabel: { align: 'right', width: 300, overflow: 'truncate', ellipsis: '...', },

type: 'category',
data: [
  'There is a problem with this paragraph, I expect the length of containLabel to be based on yAxis.axisLabel.width instead of the actual text width',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sun',
],

}, xAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)', }, }, ], };
make sure to copy paste it correctly to see extra blank;

It still looks fine on my side. demo

i seen the demo on my end there is still issue on my end. i don't know the reason why it different on your end. could you please go through the Pr changes. there you will understand the main logical issue in calculating the y-axis lable width. the logic is simple get the configured lable width and if it is available use it.

go through this video on my end

Uploading Recording 2025-12-15 094929.mp4…

[Justin-ZS]

This issue can only be reproduced on Windows.
It works well on Mac Chrome.

[Rohitgiri02]

This issue can only be reproduced on Windows. It works well on Mac Chrome.

thanks for the information. i tried it on windows earlier and this Pr will successfully fix this issue for any type of device and browser

[Justin-ZS]

containLabel is deprecated since 6.0
you can use the new outerBoundsMode to avoid this bug. demo
From the behavior, the root cause seems to be the wrong text width measurement in the Window sys.

[Rohitgiri02]

containLabel is deprecated since 6.0 you can use the new outerBoundsMode to avoid this bug. demo From the behavior, the root cause seems to be the wrong text width measurement in the Window sys.

thanks for clarification as the package is deprecated. I am closing this PR.
thanks for the continous discussion Justin-ZS