What I am trying to do is resize my echarts whenever my grid-item changes it layout. So according to react-grid-layout documentation, I call my chart.resize in the react grid layout callback function.

I initialize my chart instance in my NewvsReturnVisitors object and pass back that chart instance to index.js, below is the code

 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);
  }

This is my onLayoutChange function inside index.js

 onLayoutChange(val) {
    // this.props.onLayoutChange(layout);
    // console.log("yc ", val);
    this.setState({ val: val.resize() });
  }

Then I pass it to the callback function inside ReactGridLayout component

...

  render() {
    return (
      <div className="DetailLocationContainer">
        <button onClick={this.onAddItem}>Add Item</button>
        <button onClick={this.onChartItem}>Add Chart</button>
        <ReactGridLayout
          onBreakpointChange={this.onBreakpointChange}
          onLayoutChange={this.onLayoutChange.bind(this)}
          {...this.props}
        >
          {_.map(this.state.items, (el) => this.createElement(el))}
          {_.map(this.state.charts, (el) => this.createChart(el))}
        </ReactGridLayout>
      </div>
    );
  }
}

The expected result:

chart.resize get call and resize my chart accordingly

Actual result:

error message resize is not a function

Click my codesandbox for the full code

Really not sure where i am doing it wrong, really appreciate any help