apache / apache/echarts

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

Open
#19,886 3 comments 1 reaction 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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](https://github.com/apache/echarts/assets/168632250/a1c8e2eb-e154-45be-9937-4951d753d2a7)

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](https://github.com/apache/echarts/assets/168632250/00c8053d-57bb-4c1e-8525-2b0a091ed103)

![image](https://github.com/apache/echarts/assets/168632250/9eabf627-136f-4ac5-a729-ac15da0dd603)

### Expected Behavior

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

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and the ECharts pie-legend playground, comparing the scroll legend configuration and the effect of the invalid `orient` value. Trace how legend options are validated and laid out, then verify whether the expected multi-line paging behavior can be achieved through a supported configuration or needs a documented change.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.