Skip to content

fix(grid): respect axisLabel align in containLabel reserved space. close #21140 - #21822

Open
Raman-Katiyar wants to merge 1 commit into
apache:masterfrom
Raman-Katiyar:fix/21140-axis-label-align-space
Open

Raman-Katiyar wants to merge 1 commit into
apache:masterfrom
Raman-Katiyar:fix/21140-axis-label-align-space

Conversation

@Raman-Katiyar

Copy link
Copy Markdown

Brief Information

This pull request is in the type of:

  • bug fixing
  • new feature
  • others

What does this PR do?

Fixes grid.containLabel reserving the full axis label width/height even when axisLabel.align / axisLabel.verticalAlign makes the labels extend inwards from their anchor point, which left unwanted dead space next to the axis.

Fixed issues

Details

Before

The legacy containLabel layout (legacyLayOutGridByContained in src/coord/cartesian/legacyContainLabel.ts) always reserves the full label size plus margin, regardless of label alignment. With yAxis.axisLabel: {align: 'left', margin: 100} and grid.containLabel: true, the grid starts 120.16px from the chart edge instead of 100px — 20.16px of dead space, exactly the widest label's width (for align: 'center' the dead space is half the label width).

After

The reserved size now accounts for alignment via a new estimateOuterLabelSize helper: only the part of the label that extends outwards from its anchor point is reserved (full size for the default/outward alignment, half for center/middle, zero for inward alignment). With the fix, the grid starts exactly at 100px in the issue's configuration and the labels begin at the chart edge. Nothing changes for the default/outward alignment, and the full size is still reserved when axisLabel.rotate is set. The newer outer-bounds layout path already accounts for real label geometry and is unaffected.

Validation results:

  • New 11-case regression test in test/ut/spec/component/axis/containLabel.test.ts: 5 cases fail without the fix, all 11 pass with it.
  • Surrounding suites (component/coord/api): 10 suites / 51 tests pass.
  • Full unit suite: 27 suites / 205 tests pass.
  • npm run checktype, ESLint on the changed files, and npm run build all pass. Regenerated dist/ output is not included in this PR.

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

  • This PR ensures the security (I have read the security policy)

ZRender Changes

  • This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

New regression test: test/ut/spec/component/axis/containLabel.test.ts, covering the #21140 reproduction plus guard cases for the default, center, and inward alignments.

Others

  • Please squash the commits into one when merging

This PR is a single commit.

Could a maintainer please approve the CI workflow run for this PR? Thank you!

@echarts-bot

echarts-bot Bot commented Nov 6, 2026

Copy link
Copy Markdown

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.

This branch has not been deployed

No deployments
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.

1 participant