fix(grid): respect axisLabel.width when containLabel is true #21392
+83
−13
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
What does this PR do?
Fix grid layout calculation to respect
axisLabel.widthconfiguration whengrid.containLabelis enabled andoverflowis set to'truncate'.Fixed issues
Details
Before: What was the problem?
When
grid.containLabelwas set totrueandyAxis.axisLabel.widthwas configured withoverflow: '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:
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:
axisLabel.widthis configuredstringandnumbertypes for the width valueAfter the fix:
Implementation:
Modified the
fillLabelNameOverflowOnOneDimensionfunction insrc/coord/cartesian/Grid.tsto retrieve the configuredaxisLabel.widthand apply it to the label rect before margin calculation.Document Info
One of the following should be checked.
Misc
Security Checking
ZRender Changes
Related test cases or examples to use the new APIs
Manual test case added:
test/bug-16111.htmlThis test demonstrates the fix by showing a chart with:
grid.containLabel: trueyAxis.axisLabel.width: 300yAxis.axisLabel.overflow: 'truncate'Before the fix, the grid would overflow. After the fix, it correctly respects the 300px width.
Merging options
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: trueandaxisLabel.widthare configured together.The fix properly handles type conversion from
string | numbertonumberand only applies to y-axis labels (where width is the relevant dimension for horizontal layout).