diff --git a/frontend/src/routes/joins/[slug]/+page.svelte b/frontend/src/routes/joins/[slug]/+page.svelte
index 734884443f..7e95cad423 100644
--- a/frontend/src/routes/joins/[slug]/+page.svelte
+++ b/frontend/src/routes/joins/[slug]/+page.svelte
@@ -451,6 +451,40 @@
 	});
 
 	let selectedTab = $state<SortContext>('drift');
+
+	// update selectedEvents when joinTimeseries changes
+	$effect(() => {
+		if (joinTimeseries) {
+			untrack(() => {
+				// Only update selectedEvents if we have a previously selected point
+				if (selectedEvents.length > 0 && selectedEvents[0]?.data && dialogGroupChart) {
+					const [timestamp] = selectedEvents[0].data as [number, number];
+					const seriesName = selectedEvents[0].seriesName;
+
+					// Get the updated series data from the chart
+					const series = dialogGroupChart.getOption().series as EChartOption.Series[];
+					const updatedSeries = series.find((s) => s.name === seriesName);
+
+					if (updatedSeries && Array.isArray(updatedSeries.data)) {
+						// Find the point at the same timestamp
+						const updatedPoint = updatedSeries.data.find((point) => {
+							const [pointTimestamp] = point as [number, number];
+							return pointTimestamp === timestamp;
+						}) as [number, number] | undefined;
+
+						if (updatedPoint) {
+							selectedEvents = [
+								{
+									...selectedEvents[0],
+									data: updatedPoint
+								}
+							];
+						}
+					}
+				}
+			});
+		}
+	});
 </script>
 
 {#if shouldShowStickyHeader}