diff --git a/static/app/views/explore/metrics/metricGraph/index.tsx b/static/app/views/explore/metrics/metricGraph/index.tsx
index cef2644400ab47..4e06f2aa36a09e 100644
--- a/static/app/views/explore/metrics/metricGraph/index.tsx
+++ b/static/app/views/explore/metrics/metricGraph/index.tsx
@@ -19,6 +19,8 @@ import {
useMetricVisualize,
useSetMetricVisualize,
} from 'sentry/views/explore/metrics/metricsQueryParams';
+import {METRICS_CHART_GROUP} from 'sentry/views/explore/metrics/metricsTab';
+import {useMultiMetricsQueryParams} from 'sentry/views/explore/metrics/multiMetricsQueryParams';
import {
useQueryParamsQuery,
useQueryParamsTopEventsLimit,
@@ -29,7 +31,10 @@ import {
combineConfidenceForSeries,
prettifyAggregation,
} from 'sentry/views/explore/utils';
-import {ChartType} from 'sentry/views/insights/common/components/chart';
+import {
+ ChartType,
+ useSynchronizeCharts,
+} from 'sentry/views/insights/common/components/chart';
import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries';
import {GenericWidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList';
@@ -55,9 +60,16 @@ export function MetricsGraph({
infoContentHidden,
isMetricOptionsEmpty,
}: MetricsGraphProps) {
+ const metricQueries = useMultiMetricsQueryParams();
const visualize = useMetricVisualize();
const setVisualize = useSetMetricVisualize();
+ useSynchronizeCharts(
+ metricQueries.length,
+ !timeseriesResult.isPending,
+ METRICS_CHART_GROUP
+ );
+
function handleChartTypeChange(newChartType: ChartType) {
setVisualize(visualize.replace({chartType: newChartType}));
}
diff --git a/static/app/views/explore/metrics/metricsTab.tsx b/static/app/views/explore/metrics/metricsTab.tsx
index 78cb4b4e2f9eef..881a03799660ab 100644
--- a/static/app/views/explore/metrics/metricsTab.tsx
+++ b/static/app/views/explore/metrics/metricsTab.tsx
@@ -6,6 +6,7 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter';
import {t} from 'sentry/locale';
+import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext';
import {
ExploreBodyContent,
ExploreBodySearch,
@@ -31,6 +32,7 @@ import {
import type {PickableDays} from 'sentry/views/explore/utils';
const MAX_METRICS_ALLOWED = 4;
+export const METRICS_CHART_GROUP = 'metrics-charts-group';
type MetricsTabProps = PickableDays;
@@ -118,20 +120,22 @@ function MetricsTabBodySection() {
- {metricQueries.map((metricQuery, index) => {
- return (
-
-
-
- );
- })}
+
+ {metricQueries.map((metricQuery, index) => {
+ return (
+
+
+
+ );
+ })}
+