diff --git a/static/app/views/dashboards/contexts/widgetSyncContext.tsx b/static/app/views/dashboards/contexts/widgetSyncContext.tsx
--- a/static/app/views/dashboards/contexts/widgetSyncContext.tsx
+++ b/static/app/views/dashboards/contexts/widgetSyncContext.tsx
@@ -1,12 +1,12 @@
 import type {ReactNode} from 'react';
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {EChartsType} from 'echarts';
 import * as echarts from 'echarts';
 
 import {uniqueId} from 'sentry/utils/guid';
 import {createDefinedContext} from 'sentry/utils/performance/contexts/utils';
 
-type RegistrationFunction = (chart: EChartsType) => void;
+type RegistrationFunction = (chart: EChartsType) => () => void;
 
 interface WidgetSyncContext {
   groupName: string;
@@ -26,13 +26,17 @@
 
 export function WidgetSyncContextProvider({
   children,
-  groupName = uniqueId(),
+  groupName: groupNameProp,
 }: WidgetSyncContextProviderProps) {
+  // Use useState to ensure stable groupName when not provided as prop
+  const [stableGroupName] = useState(() => groupNameProp ?? uniqueId());
+  const groupName = groupNameProp ?? stableGroupName;
+
   const chartsRef = useRef<Map<Element, EChartsType>>(new Map());
-  const observerRef = useRef<IntersectionObserver | null>(null);
 
-  useEffect(() => {
-    observerRef.current = new IntersectionObserver(entries => {
+  // Create observer synchronously so it exists before children mount (fixes Bug 3)
+  const observerRef = useMemo(() => {
+    return new IntersectionObserver(entries => {
       for (const entry of entries) {
         const chart = chartsRef.current.get(entry.target);
         if (!chart) {
@@ -48,27 +52,41 @@
 
       echarts?.connect(groupName);
     });
+  }, [groupName]);
 
+  // Re-observe all existing charts when observer changes (fixes Bug 1)
+  useEffect(() => {
+    const charts = Array.from(chartsRef.current.entries());
+    for (const [dom] of charts) {
+      observerRef.observe(dom);
+    }
+
     return () => {
-      observerRef.current?.disconnect();
+      observerRef.disconnect();
     };
-  }, [groupName]);
+  }, [observerRef]);
 
   const register = useCallback(
     (chart: EChartsType) => {
       const dom = chart.getDom();
       if (!dom) {
-        return;
+        return () => {};
       }
 
       chartsRef.current.set(dom, chart);
-      observerRef.current?.observe(dom);
+      observerRef.observe(dom);
 
       // Set the group immediately for charts that may already be visible
       chart.group = groupName;
       echarts?.connect(groupName);
+
+      // Return unregister function for cleanup (fixes Bug 2)
+      return () => {
+        chartsRef.current.delete(dom);
+        observerRef.unobserve(dom);
+      };
     },
-    [groupName]
+    [groupName, observerRef]
   );
 
   return (
@@ -89,7 +107,7 @@
   if (!context) {
     // The provider was not registered, return a dummy function
     return {
-      register: (_p: any) => null,
+      register: (_p: any) => () => {},
       groupName: '',
     };
   }

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
--- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
+++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import {mergeRefs} from '@react-aria/utils';
 import * as Sentry from '@sentry/react';
@@ -137,6 +137,7 @@
 
   const chartRef = useRef<ReactEchartsRef | null>(null);
   const {register: registerWithWidgetSyncContext, groupName} = useWidgetSyncContext();
+  const unregisterRef = useRef<(() => void) | null>(null);
 
   const pageFilters = usePageFilters();
   const {start, end, period, utc} =
@@ -445,11 +446,18 @@
   const handleChartReady = useCallback(
     (instance: echarts.ECharts) => {
       onChartReadyZoom(instance);
-      registerWithWidgetSyncContext(instance);
+      unregisterRef.current = registerWithWidgetSyncContext(instance);
     },
     [onChartReadyZoom, registerWithWidgetSyncContext]
   );
 
+  // Cleanup: unregister chart on unmount
+  useEffect(() => {
+    return () => {
+      unregisterRef.current?.();
+    };
+  }, []);
+
   const showXAxisProp = props.showXAxis ?? 'auto';
   const showXAxis = showXAxisProp === 'auto';