apache / apache/echarts

Multiple Charts Will Grow but Not Shrink In A Grid

Open
#13,004 13 comments 0 reactions 0 assignees View on GitHub
bug discussion-required en topic: css grid/flex
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version
4.8.0

### Reproduction link
[https://jsfiddle.net/8hngc24b/49/](https://jsfiddle.net/8hngc24b/49/)

### Steps to reproduce
-Create a grid layout consuming 100% width and height with two columns.
-Please a chart (ex. Pie) in both columns.
-Tie windows.resize event to a function that resizes the charts.
-Make browser window larger in height.
-Note that charts grow.
-Make browser window smaller in height.
-Note that charts do not shring.
-Make browser window smaller in width.
-Note that charts shrink.

### What is expected?
Charts shrink when resized as part of the browser window being reduced.

### What is actually happening?
The charts are not shrinking creating overflow.

---
This only occurs when multiple charts are on the same grid row. Here's the same example with a single chart and it works fine: [https://jsfiddle.net/8hngc24b/46/](https://jsfiddle.net/8hngc24b/46/).

My guess is that there's some kind of race condition here because the resizing is happening serially: the grid's row can't shrink because the second graph hasn't resized yet and so it redraws with the same height.

There's a few other issues that sound similar. Here's one talking about using Flex (which I'm not doing) and where one of the comments suggest calling resize on each chart (which I am doing).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.