diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
index a74ff574bc0c8..a886c3f29d57c 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
@@ -59,7 +59,11 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
   const { urlParams, uiFilters } = useUrlParams();
   const { serviceName, serviceNodeName } = match.params;
   const { agentName } = useAgentName();
-  const { data } = useServiceMetricCharts(urlParams, agentName);
+  const { data } = useServiceMetricCharts(
+    urlParams,
+    agentName,
+    serviceNodeName
+  );
   const { start, end } = urlParams;
 
   const { data: { host, containerId } = INITIAL_DATA, status } = useFetcher(
@@ -177,25 +181,6 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
           </EuiFlexItem>
         </MetadataFlexGroup>
       )}
-      {agentName && (
-        <ChartPointerEventContextProvider>
-          <EuiFlexGrid columns={2} gutterSize="s">
-            {data.charts.map((chart) => (
-              <EuiFlexItem key={chart.key}>
-                <EuiPanel>
-                  <MetricsChart
-                    start={start}
-                    end={end}
-                    chart={chart}
-                    fetchStatus={status}
-                  />
-                </EuiPanel>
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGrid>
-          <EuiSpacer size="xxl" />
-        </ChartPointerEventContextProvider>
-      )}
       <SearchBar />
       <EuiPage>
         {agentName && (
diff --git a/x-pack/plugins/apm/public/hooks/useServiceMetricCharts.ts b/x-pack/plugins/apm/public/hooks/useServiceMetricCharts.ts
index d264ad6069db3..7a54c6ffc6dbe 100644
--- a/x-pack/plugins/apm/public/hooks/useServiceMetricCharts.ts
+++ b/x-pack/plugins/apm/public/hooks/useServiceMetricCharts.ts
@@ -17,7 +17,8 @@ const INITIAL_DATA: MetricsChartsByAgentAPIResponse = {
 
 export function useServiceMetricCharts(
   urlParams: IUrlParams,
-  agentName?: string
+  agentName?: string,
+  serviceNodeName?: string
 ) {
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { start, end } = urlParams;
@@ -30,6 +31,7 @@ export function useServiceMetricCharts(
           params: {
             path: { serviceName },
             query: {
+              serviceNodeName,
               start,
               end,
               agentName,
@@ -39,7 +41,7 @@ export function useServiceMetricCharts(
         });
       }
     },
-    [serviceName, start, end, agentName, uiFilters]
+    [serviceName, start, end, agentName, serviceNodeName, uiFilters]
   );
 
   return {
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/default.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/default.ts
index fbcbc9f12791f..71bc1018b619b 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/default.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/default.ts
@@ -13,8 +13,8 @@ export async function getDefaultMetricsCharts(
   serviceName: string
 ) {
   const charts = await Promise.all([
-    getCPUChartData(setup, serviceName),
-    getMemoryChartData(setup, serviceName),
+    getCPUChartData({ setup, serviceName }),
+    getMemoryChartData({ setup, serviceName }),
   ]);
 
   return { charts };
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts
index 7cedeb828e3b7..8e68c229c555c 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts
@@ -30,11 +30,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-const getGcRateChart = (
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) => {
+function getGcRateChart({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   return fetchAndTransformGcMetrics({
     setup,
     serviceName,
@@ -42,6 +46,6 @@ const getGcRateChart = (
     chartBase,
     fieldName: METRIC_JAVA_GC_COUNT,
   });
-};
+}
 
 export { getGcRateChart };
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts
index f21d3d8e7c056..e7a83e71a22e9 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts
@@ -30,11 +30,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-const getGcTimeChart = (
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) => {
+function getGcTimeChart({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   return fetchAndTransformGcMetrics({
     setup,
     serviceName,
@@ -42,6 +46,6 @@ const getGcTimeChart = (
     chartBase,
     fieldName: METRIC_JAVA_GC_TIME,
   });
-};
+}
 
 export { getGcTimeChart };
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
index eb79897f9f055..4f087594acc21 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
@@ -50,11 +50,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-export async function getHeapMemoryChart(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getHeapMemoryChart({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/index.ts
index d4084701f0f49..4a1f3f572b3a5 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/index.ts
@@ -13,19 +13,23 @@ import { getMemoryChartData } from '../shared/memory';
 import { getGcRateChart } from './gc/get_gc_rate_chart';
 import { getGcTimeChart } from './gc/get_gc_time_chart';
 
-export async function getJavaMetricsCharts(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getJavaMetricsCharts({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   const charts = await Promise.all([
-    getCPUChartData(setup, serviceName, serviceNodeName),
-    getMemoryChartData(setup, serviceName, serviceNodeName),
-    getHeapMemoryChart(setup, serviceName, serviceNodeName),
-    getNonHeapMemoryChart(setup, serviceName, serviceNodeName),
-    getThreadCountChart(setup, serviceName, serviceNodeName),
-    getGcRateChart(setup, serviceName, serviceNodeName),
-    getGcTimeChart(setup, serviceName, serviceNodeName),
+    getCPUChartData({ setup, serviceName, serviceNodeName }),
+    getMemoryChartData({ setup, serviceName, serviceNodeName }),
+    getHeapMemoryChart({ setup, serviceName, serviceNodeName }),
+    getNonHeapMemoryChart({ setup, serviceName, serviceNodeName }),
+    getThreadCountChart({ setup, serviceName, serviceNodeName }),
+    getGcRateChart({ setup, serviceName, serviceNodeName }),
+    getGcTimeChart({ setup, serviceName, serviceNodeName }),
   ]);
 
   return { charts };
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
index 50cc449da3c15..dc2684f707d17 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
@@ -47,11 +47,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-export async function getNonHeapMemoryChart(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getNonHeapMemoryChart({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
index 0062f0a423970..b42ab61f5c766 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
@@ -39,11 +39,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-export async function getThreadCountChart(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getThreadCountChart({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   return fetchAndTransformMetrics({
     setup,
     serviceName,
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
index ca642aa12fff1..83311caf99516 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
@@ -51,11 +51,15 @@ const chartBase: ChartBase = {
   series,
 };
 
-export async function getCPUChartData(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getCPUChartData({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   const metricsChart = await fetchAndTransformMetrics({
     setup,
     serviceName,
diff --git a/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts b/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
index e6ee47cc815ef..8fd234903d58e 100644
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/memory/index.ts
@@ -68,11 +68,15 @@ export const percentCgroupMemoryUsedScript = {
     `,
 };
 
-export async function getMemoryChartData(
-  setup: Setup & SetupTimeRange,
-  serviceName: string,
-  serviceNodeName?: string
-) {
+export async function getMemoryChartData({
+  setup,
+  serviceName,
+  serviceNodeName,
+}: {
+  setup: Setup & SetupTimeRange;
+  serviceName: string;
+  serviceNodeName?: string;
+}) {
   const cgroupResponse = await fetchAndTransformMetrics({
     setup,
     serviceName,
diff --git a/x-pack/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts b/x-pack/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
index 72cd65deebff6..1fc510b77c856 100644
--- a/x-pack/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/get_metrics_chart_data_by_agent.ts
@@ -25,7 +25,7 @@ export async function getMetricsChartDataByAgent({
 }): Promise<MetricsChartsByAgentAPIResponse> {
   switch (agentName) {
     case 'java': {
-      return getJavaMetricsCharts(setup, serviceName, serviceNodeName);
+      return getJavaMetricsCharts({ setup, serviceName, serviceNodeName });
     }
 
     default: {
diff --git a/x-pack/plugins/apm/server/lib/metrics/queries.test.ts b/x-pack/plugins/apm/server/lib/metrics/queries.test.ts
index fc24377ebf390..0bf3d3daaad66 100644
--- a/x-pack/plugins/apm/server/lib/metrics/queries.test.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/queries.test.ts
@@ -21,7 +21,7 @@ describe('metrics queries', () => {
   const createTests = (serviceNodeName?: string) => {
     it('fetches cpu chart data', async () => {
       mock = await inspectSearchParams((setup) =>
-        getCPUChartData(setup, 'foo', serviceNodeName)
+        getCPUChartData({ setup, serviceName: 'foo', serviceNodeName })
       );
 
       expect(mock.params).toMatchSnapshot();
@@ -29,7 +29,7 @@ describe('metrics queries', () => {
 
     it('fetches memory chart data', async () => {
       mock = await inspectSearchParams((setup) =>
-        getMemoryChartData(setup, 'foo', serviceNodeName)
+        getMemoryChartData({ setup, serviceName: 'foo', serviceNodeName })
       );
 
       expect(mock.params).toMatchSnapshot();
@@ -37,7 +37,7 @@ describe('metrics queries', () => {
 
     it('fetches heap memory chart data', async () => {
       mock = await inspectSearchParams((setup) =>
-        getHeapMemoryChart(setup, 'foo', serviceNodeName)
+        getHeapMemoryChart({ setup, serviceName: 'foo', serviceNodeName })
       );
 
       expect(mock.params).toMatchSnapshot();
@@ -45,7 +45,7 @@ describe('metrics queries', () => {
 
     it('fetches non heap memory chart data', async () => {
       mock = await inspectSearchParams((setup) =>
-        getNonHeapMemoryChart(setup, 'foo', serviceNodeName)
+        getNonHeapMemoryChart({ setup, serviceName: 'foo', serviceNodeName })
       );
 
       expect(mock.params).toMatchSnapshot();
@@ -53,7 +53,7 @@ describe('metrics queries', () => {
 
     it('fetches thread count chart data', async () => {
       mock = await inspectSearchParams((setup) =>
-        getThreadCountChart(setup, 'foo', serviceNodeName)
+        getThreadCountChart({ setup, serviceName: 'foo', serviceNodeName })
       );
 
       expect(mock.params).toMatchSnapshot();