You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "SchnWalter (via GitHub)" <gi...@apache.org> on 2025/05/12 18:01:06 UTC

[PR] fix(legend): Fix text overflow and improve layout handling. (#20237) [echarts]

SchnWalter opened a new pull request, #20967:
URL: https://github.com/apache/echarts/pull/20967

   <!-- Please fill in the following information to help us review your PR more efficiently. -->
   
   ## Brief Information
   
   This pull request is in the type of:
   
   - [x] bug fixing
   - [ ] new feature
   - [ ] others
   
   
   
   ### What does this PR do?
   
   Improve the overall user experience by ensuring legends are displayed properly, avoiding overflow issues with lengthy item labels or limited space. 
   
   Additionally, a new test has been provided to demonstrate and verify the changes by comparing the behavior before and after applying the changes.
   
   
   ### Fixed issues
   
   - #20237: [Bug] Plain legend label overflows container if text is too long
   
   
   ## Details
   
   ### Before: What was the problem?
   
   The legend has a width of 128px and the overflow is configured to break words, but it doesn't do anything.
   
   ![image](https://github.com/user-attachments/assets/4e9d438a-5d7b-44c6-a06e-9215f015e941)
   
   
   ### After: How does it behave after the fixing?
   
   The legend item text overflow is working correctly.
   
   ![image](https://github.com/user-attachments/assets/d6cc9050-2b30-47cc-841e-a4a6c8c9b145)
   
   
   
   ## 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
   
   ### ZRender Changes
   
   - [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).
   
   ### Related test cases or examples to use the new APIs
   
   - test/legend-overflow.html
   
   
   
   ## Others
   
   ### Merging options
   
   - [ ] Please squash the commits into a single one when merging.
   
   ### Other information
   


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix text overflow and improve layout handling. (#20237) [echarts]

Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on PR #20967:
URL: https://github.com/apache/echarts/pull/20967#issuecomment-2995288218

   Congratulations! Your PR has been merged. Thanks for your contribution! 👍


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix legend text overflow and improve layout handling [echarts]

Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia commented on code in PR #20967:
URL: https://github.com/apache/echarts/pull/20967#discussion_r2161118097


##########
src/component/legend/LegendView.ts:
##########
@@ -469,7 +473,8 @@ class LegendView extends ComponentView {
                 y: itemHeight / 2,
                 fill: textColor,
                 align: textAlign,
-                verticalAlign: 'middle'
+                verticalAlign: 'middle',
+                width: maxSize.width - textX,

Review Comment:
   OK. Let's leave this to the next version.



-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix legend text overflow and improve layout handling [echarts]

Posted by "100pah (via GitHub)" <gi...@apache.org>.
100pah commented on code in PR #20967:
URL: https://github.com/apache/echarts/pull/20967#discussion_r2161105712


##########
src/component/legend/LegendView.ts:
##########
@@ -469,7 +473,8 @@ class LegendView extends ComponentView {
                 y: itemHeight / 2,
                 fill: textColor,
                 align: textAlign,
-                verticalAlign: 'middle'
+                verticalAlign: 'middle',
+                width: maxSize.width - textX,

Review Comment:
   If legend is layout horizontally, the "break" effect would be wrong. 
   And if the text has `textStyle.backgroundColor`, the effect would be broken by this change, since textStyle.width is shared by backgroundColor and overflow currently.
   
   I think this feature currently can only serve for vertical layout.
   And set width only if `overflow: 'truncate' | 'break' | 'breakAll', for `textStyle.backgroundColor` compromise.
   
   And zrender need upgrade to support a more wise setting about text width, like maxWidth.
   
   



-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix text overflow and improve layout handling. (#20237) [echarts]

Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on PR #20967:
URL: https://github.com/apache/echarts/pull/20967#issuecomment-2873488536

   Thanks for your contribution!
   The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/echarts/wiki/How-to-make-a-pull-request).


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix text overflow and improve layout handling. (#20237) [echarts]

Posted by "Ovilia (via GitHub)" <gi...@apache.org>.
Ovilia merged PR #20967:
URL: https://github.com/apache/echarts/pull/20967


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


Re: [PR] fix(legend): Fix text overflow and improve layout handling. (#20237) [echarts]

Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on PR #20967:
URL: https://github.com/apache/echarts/pull/20967#issuecomment-2874970630

   The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20967@ed9013d
   <!-- ECHARTS_PR_PREVIEW -->


-- 
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: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org