[Bug] Legend lies over diagram for small screens

[GUlbricht]

Version

5.3.0

Link to Minimal Reproduction

https://codesandbox.io/s/polished-sun-56ohe?file=/src/index.js

Steps to Reproduce

1. Create a Bar Stack Chart
2. Add a bunch of series
3. Resize to mobile screen size

Current Behavior

The diagram legend is not displayed correctly as shown in the image. The legend itself is generated correctly, but the position does not fit. The legend is placed over the x-axis of the chart.

Expected Behavior

The legend should be displayed below the x-axis without shrinking the chart itself with grid.bottom.

Environment

- OS: Windows 11 and 10, macOS BigSure, Android 12 and iOS 15.3.1
- Browser: Chrome 98.0.4758.82 (64 bit) and Safari
- Framework: Angular

Any additional comments?

No response

[Ovilia]

Currently we don't have auto layout to avoid collision. You can set grid.bottom to be larger. If you need different values for different canvas size, you can use responsive design.

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!