Multiple Charts Will Grow but Not Shrink In A Grid

[bryandam]

Version

4.8.0

Reproduction link

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/.

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).

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[plainheart]

It seems to do with the grid layout. When the height of the chart grows and calls resize function, ECharts cannot calculate a new correct height. But I think there may be no need to use a single chart because it works well if not using display: grid.

For example, use the common default layout display: block.

.container {
  height: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 0;
}

.chart {
  width: 50%;
  height: 100%;
  float: left;
  /* left: 0;
    top: 0; */
  position: relative;
}

[bryandam]

Thanks for the reply @plainheart. What's weird is that they work for a single chart, they work when charts grows, just not when there's multiple and it shrinks.

A non-grid layout does work but then you loose the power that Grid provides. In our case we are replicating some WPF charting and in a couple of cases the user can dynamically select what charts to display. So Grid's ability to handle dynamic content in a dynamic view port is super awesome.

My guess is that this is related to #11791 which is a similar problem with Flex layouts.

[anguiao]

I also had the same problem, and finally I solved it by manually specifying the width and height with calc, it works.
But I think this loses a big advantage of grid layout.

[bryandam]

@anguiao Yea that works but at that point you're not really using grid. I've had some small amount of success by putting each chart in its own grid (by itself) but that only seems to work horizontally. If I stack charts in two dimensions (ex. a 2x2 grid) then I'm right back at the same problem.