diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
index 51ea5d57969..0ef7704311c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/components/Echart.tsx
@@ -22,6 +22,8 @@ import React, {
   useMemo,
   forwardRef,
   useImperativeHandle,
+  useLayoutEffect,
+  useCallback,
 } from 'react';
 import { styled } from '@superset-ui/core';
 import { ECharts, init } from 'echarts';
@@ -92,11 +94,23 @@ function Echart(
     previousSelection.current = currentSelection;
   }, [currentSelection]);
 
+  const handleSizeChange = useCallback(
+    ({ width, height }: { width: number; height: number }) => {
+      if (chartRef.current) {
+        chartRef.current.resize({ width, height });
+      }
+    },
+    [],
+  );
+
+  // did mount
   useEffect(() => {
-    if (chartRef.current) {
-      chartRef.current.resize({ width, height });
-    }
-  }, [width, height]);
+    handleSizeChange({ width, height });
+  }, []);
+
+  useLayoutEffect(() => {
+    handleSizeChange({ width, height });
+  }, [width, height, handleSizeChange]);
 
   return <Styles ref={divRef} height={height} width={width} />;
 }