Skip to content

Conversation

@Rohitgiri02
Copy link

@Rohitgiri02 Rohitgiri02 commented Nov 27, 2025

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

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

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 apache#16111
@echarts-bot
Copy link

echarts-bot bot commented Nov 27, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

It doesn't work correctly when I set grid.containLabel:true and yAxis.axisLabel.overflow

1 participant