On click of a button, I show a chart. When the chart is first instantiated, a ResizeObserver is set on the parent container of the chart. My application has a collapsible sidebar and when I collapse it, the chart expands to fill up the extra space as expected. However, when I reopen the sidebar, the chart does not shrink back down.

This is the style of the parent container (it is nested within other flex elements so perhaps that is part of the problem?):

<div id={"chartContainer"}
     style={{
         width: "100%",
         height: "100%",
         border: "2px solid yellow",
     }}
/>

This is the style of the chart:

<div ref={chartRef} style={{ width: "100%", height: "80vh" }}></div>

Relevant component code below, but here is a working example on code sandbox. (If you’re on a small screen, you’ll have to open the codesandbox in full screen to see all the components. Click “Show Chart” to create the chart, click the “X” in the upper left to collapse the sidebar and the icon in the same place to reopen it.)

export const Chart = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let chart: ECharts | undefined;
    if (chartRef.current !== null) {
      chart = init(chartRef.current, null, { renderer: "svg" });
    }

    const parentContainer: HTMLDivElement = document.querySelector("#chartContainer");
    
    new ResizeObserver(() => {
      chart.resize();
    }).observe(parentContainer);

    return () => {
      chart?.dispose();
    };
  }, []);

  useEffect(() => {
    //Update chart
    if (chartRef.current !== null) {
      const chart = getInstanceByDom(chartRef.current);
      chart?.setOption(option);
    }
  }, [option]);

  return <div ref={chartRef} style={{ width: "100%", height: "80vh" }}></div>;
};