Rohitgiri02 opened a new pull request, #21392:
URL: https://github.com/apache/echarts/pull/21392
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:
- [x] 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
- #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.
- [x] 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
- [x] This PR does not use security-sensitive Web APIs.
### ZRender Changes
- [x] 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
- [x] 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).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
