Incubator-echarts: Resize multiple charts

[Kopyov]

I have 3 charts on 1 page, but resizing works only in the last one and works only for extending width, not when i resize browser window to smaller width. Can you please suggest a solution?

[Kopyov]

Figured out - this bug is related to flexbox layout, if i remove display: flex; from parent containers, all works fine. Otherwise i can resize the charts only in 1 direction

[chj-damon]

@pissang I think this is a bug that echarts should try to fix. because flexbox layout is now popular.

[Shonke]

@Kopyov @chj-damon
I also encountered this problem.
Flex-grow set to 0 or fixed values can be repaired. I hope I can help you.

[Kopyov]

I kinda found a solution - adding overflow: auto; to the flex container solves the issue. Basically as far as i know this is a general fix for other libraries as well.

[chj-damon]

@Kopyov thanks for that!

[mikiasmohamed]

I was having the same issue. But there was no flebox container. As a solution, during initialization, I stored each chart to charts array. And, on window.resize() , I looped over the array and invoked resize() on each chart object.

  charts: [],
  initalizeChart(data) {
    const values = [];
    const timestamps = [];
    const self = this;

    data.forEach((item) => {
      values.push(item.value);
      timestamps.push(item.timestamp);
    });

    const option = this.setupOptions(values, timestamps);
    const chart = document.querySelector(`#${this.elementId} .chart`);
    const myChart = window.echarts.init(chart);

    self.charts.push(myChart);

    window.onresize = function() {
      self.charts.forEach((obj) => {
        obj.resize();
      });
    };

    myChart.setOption(option);
  },