Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Unable to set multiple legend rows, when legend type is scroll. #19886

Open
okatz123 opened this issue May 1, 2024 · 2 comments
Open
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature.

Comments

@okatz123
Copy link

okatz123 commented May 1, 2024

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/pie-with-scrollable-legend-dqj2r2?file=%2Findex.js

Steps to Reproduce

I use your playground
https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1
and change legend to have an unknown orient string. I also set width and height:
legend: { type: 'scroll', orient: 'veeertical', right: 10, bottom: 20, width: 400, height: 200, data: data.legendData },

I can get the legend behavior I am looking for - a multi-line legend with paging.

image

In code it is not possible since the only allowed orient values are 'vertical'/'horizontal', and the code doesn't compile.
Is there any valid way to achieve this legend behavior?

Current Behavior

A single row of legend items or a single column of items, that can become very long.
When using 'plain' type the legend items overflow.
My legend includes a large number of items, and neither one of the solutions fit.

image

image

Expected Behavior

To be able to achieve the same behavior as in echarts playground.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@okatz123 okatz123 added the bug label May 1, 2024
@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels May 1, 2024
@echarts-bot echarts-bot bot changed the title [Bug] Unable to set multiple legend rows, when legend type is scroll. [Bug] Unable to set multiple legend rows, when legend type is scroll. May 1, 2024
@helgasoft
Copy link

I can get the legend behavior I am looking for - a multi-line legend with paging.

Well done, you got it working. Eventually orient: 'none' should be added to the API documentation.

@okatz123
Copy link
Author

okatz123 commented May 2, 2024

In theory it is working, but when using typescript code will not compile. 'none' should be added to type LayoutOrient

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

2 participants