diff --git a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
index 955ec7603..e2a157cc0 100644
--- a/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
+++ b/packages/web-console/src/scenes/Editor/Metrics/metric.tsx
@@ -65,19 +65,20 @@ export const Metric = ({
   const [loading, setLoading] = useState(metric.tableId !== undefined)
   const [lastNotNull, setLastNotNull] = useState<number>()
   const [colorPickerOpen, setColorPickerOpen] = useState(false)
-  const [lastTableId, setLastTableId] = useState<number | undefined>(
-    metric.tableId,
-  )
+  const tableIdRef = React.useRef(metric.tableId)
   const dateFromRef = React.useRef(dateFrom)
   const dateToRef = React.useRef(dateTo)
   const dataRef = React.useRef<uPlot.AlignedData>([[], []])
-  const tableIdRef = React.useRef(metric.tableId)
+  const tableNameRef = React.useRef<string | undefined>()
 
   dateFromRef.current = dateFrom
   dateToRef.current = dateTo
 
   const tables = useSelector(selectors.query.getTables)
 
+  const tableName = tables.find((t) => t.id === metric.tableId)?.table_name
+  tableNameRef.current = tableName
+
   const widgetConfig = widgets[metric.metricType]
 
   const isRollingAppendEnabled =
@@ -141,17 +142,22 @@ export const Metric = ({
   }
 
   const refreshMetricsData = (payload?: MetricsRefreshPayload) => {
-    fetchMetric(payload?.overwrite)
+    if (tableNameRef.current) {
+      fetchMetric(payload?.overwrite)
+    } else {
+      dataRef.current = [[], []]
+      setLoading(false)
+    }
   }
 
   useEffect(() => {
-    if (metric.tableId && metric.tableId !== lastTableId) {
+    if (tableName) {
+      tableNameRef.current = tableName
       tableIdRef.current = metric.tableId
       dataRef.current = [[], []]
-      setLastTableId(metric.tableId)
       fetchMetric(true)
     }
-  }, [metric.tableId])
+  }, [tableName])
 
   useEffect(() => {
     eventBus.subscribe<MetricsRefreshPayload>(
@@ -172,8 +178,6 @@ export const Metric = ({
       </MetricInfoRoot>
     )
 
-  const tableName = tables.find((t) => t.id === metric.tableId)?.table_name
-
   // const canZoomToData = tableName !== undefined && lastNotNull !== undefined
   const canZoomToData = false