Chart unable to resize with react grid layout

[lieyongchang]

Version

5.2.0

Reproduction link

https://codesandbox.io/s/react-grid-layout-with-resizable-forked-z3wd9?file=/src/index.js

Steps to reproduce

resize the grid item, grid item is being resize but not the charts

What is expected?

the charts to resize

What is actually happening?

the chart did not resize

[echarts-bot[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 it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

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

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

Have a nice day! 🍵

[Ovilia]

This is not a bug of Apache ECharts. Either you or the third-party lib should call chart.resize when the container resizes.

[lieyongchang]

in my codesandbox, i did call chart.resize

function renderChart() {
    const renderInstance = echarts.getInstanceByDom(chart.current);

    if (renderInstance) {
      chartInstance = renderInstance;
    } else {
      chartInstance = echarts.init(chart.current);
      chartInstance.resize();
    }
    chartInstance.setOption(option);
  }

but it is not changing as expected

[Ovilia]

I don't know react well but it seems this code is called once when init? Instead, you should listen to the change event of its container and call chart.resize().

What chart.resize() does is to reset the chart size according to current container, rather than listen to future size changes.

[lieyongchang]

it is call under useEffect

useEffect(() => {
    renderChart();
  });

which it is already checking if there is a change in size. Thats why i confuse why it is not hitting the chart.resize

[Ovilia]

chartInstance.resize() should be called when resizing.

[lieyongchang]

this is the part i am having an issue with, how do i know my parent width or height has change? click on this link for the changes i have made.

what i have try , passing my parent width and height as props

const Newvsresturnvisitors = (props) 

and using it as own

 return (
    <div
      ref={chart}
      // style={{
      //   width: "100%",
      //   height: "100%",
      //   background: "white"
      // }}

      style={{
        props
      }}
    />
  );

but this cause another error :( save me

[pissang]

Duplicate with https://github.com/apache/echarts/issues/15678. You can use https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver API listening to the DOM size change and do chart.resize()

[lieyongchang]

@pissang @Ovilia I make some changes, click this link .

What I have done is pass my chartInstance to index.js, so when ResponsiveGridLayout change layout, it will call the resize function

  const onLayoutChange = () => {

    if (value != null) {
      console.log("value not null");
      value.resize();
      console.log("value resize ", value.resize());
      console.log("chart value ", value);
    }

  };

  return (
    <ResponsiveGridLayout
      layouts={layout}
      onLayoutChange={() => onLayoutChange()}
    >
      <div key="1">
        <Card style={styles} val={setVal} />
      </div>
    </ResponsiveGridLayout>
  );

Expected Result echart resize accordingly

Actual Result I console log val.resize() and it is undefined, but when i console log value, it is not null and the resize function exist. This is what confuse me.

why when calling resize, it return undefined?

Some information, onLayout is only call when the gird changes it size

what am I doing wrong here?

[pissang]

I don't think it's an echarts related issue anymore. Please check your code again.

[lieyongchang]

I still dont see it :(

I only pass the chart instance when it is created. so the object is not null. So by right I should be able to call the resize method

function renderChart() {
    const renderInstance = echarts.getInstanceByDom(chart.current);

    if (renderInstance) {
      chartInstance = renderInstance;
    } else {
      chartInstance = echarts.init(chart.current, null, {
        width: 500,
        height: 300
      });

      props.value(chartInstance);
    }
    chartInstance.setOption(option);
  }

[pissang]

resize() is an action method and it won't return anything.

Size of react-grid-item is changed. But the card content div still have the same size. You can give the clientWidth/clientHeight of react-grid-item when using resize.

chart.resize({
  width: ...
  height: ...
});

[lieyongchang]

So I have follow this doc on how to call the resize method. Still did not work

below is my code, click this link for my codesandbox.

  const onLayoutChange = () => {
    // console.log(value);
    if (value != null) {
      console.log("value not null");
      value.resize({
        width: 800,
        height: 400
      });
    }
  };

Expected result: chart change to the dimension i specify when grid layout changes Actual Result: nothing happens

[pissang]

What are you expected when you fix the width and height to 800 and 400?

[lieyongchang]

I was trying to see if my charts did resize as specify. If it does, then i will pass in my grid item dimension and pass it to the resize action

But currently it does not even change to the width n height i specify

[pissang]

I tried and it works.

[lieyongchang]

Thank you for being so patient with me, I console log and it did change.