diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
index 9789513efd84..5e76140ce21e 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMetrics/index.tsx
@@ -21,18 +21,18 @@ export function ServiceMetrics({ agentName }: ServiceMetricsProps) {
   const { start, end } = urlParams;
   return (
     <React.Fragment>
-      <EuiFlexGrid columns={2} gutterSize="s">
-        {data.charts.map(chart => (
-          <EuiFlexItem key={chart.key}>
-            <EuiPanel>
-              <ChartsSyncContextProvider>
+      <ChartsSyncContextProvider>
+        <EuiFlexGrid columns={2} gutterSize="s">
+          {data.charts.map(chart => (
+            <EuiFlexItem key={chart.key}>
+              <EuiPanel>
                 <MetricsChart start={start} end={end} chart={chart} />
-              </ChartsSyncContextProvider>
-            </EuiPanel>
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGrid>
-      <EuiSpacer size="xxl" />
+              </EuiPanel>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+        <EuiSpacer size="xxl" />
+      </ChartsSyncContextProvider>
     </React.Fragment>
   );
 }