diff --git a/packages/charts/package.json b/packages/charts/package.json
index 6d734983a76..b7532383ec2 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "chart.js": "^2.9.3",
     "chartjs-plugin-datalabels": "^0.7.0",
+    "lodash.debounce": "^4.0.8",
     "get-best-contrast-color": "^0.3.1",
     "lodash.merge": "^4.6.2",
     "react-chartjs-2": "^2.8.0",
diff --git a/packages/charts/src/hooks/useSizeMonitor.ts b/packages/charts/src/hooks/useSizeMonitor.ts
index dd83cd50adb..92ff2da7a6b 100644
--- a/packages/charts/src/hooks/useSizeMonitor.ts
+++ b/packages/charts/src/hooks/useSizeMonitor.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import debounce from 'lodash.debounce';
 
 export const useSizeMonitor = (props, container) => {
   const { height: heightProp, width: widthProp, minHeight, minWidth } = props;
@@ -39,7 +40,7 @@ export const useSizeMonitor = (props, container) => {
   useEffect(() => {
     if (enableSizeMonitor && container.current) {
       // @ts-ignore
-      observer.current = new ResizeObserver(recalculateSize);
+      observer.current = new ResizeObserver(debounce(recalculateSize, 500));
       observer.current.observe(container.current);
     }
     return () => {