diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
index 79cd1c5753ae5..4a5f43dacedf4 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
@@ -89,7 +89,10 @@ export function PageLoadDistChart({
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
-    <ChartWrapper loading={loading || breakdownLoading} height="250px">
+    <ChartWrapper
+      loading={loading || breakdownLoading}
+      height="calc(100% - 72px)"
+    >
       {(!loading || data) && (
         <PageLoadChart>
           <Settings
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
index 904144dec6de9..327b8d67ec78d 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageViewsChart.tsx
@@ -84,7 +84,7 @@ export function PageViewsChart({ data, loading }: Props) {
   };
 
   return (
-    <ChartWrapper loading={loading} height="250px">
+    <ChartWrapper loading={loading} height="calc(100% - 72px)">
       {(!loading || data) && (
         <Chart>
           <Settings
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
index dea6525d4be5f..b5ac4b2714526 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx
@@ -22,6 +22,7 @@ import {
 } from '@elastic/eui/dist/eui_charts_theme';
 import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
 import { ChartWrapper } from '../ChartWrapper';
+import { I18LABELS } from '../translations';
 
 const StyleChart = styled.div`
   height: 100%;
@@ -49,7 +50,7 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
     : EUI_CHARTS_THEME_LIGHT;
 
   return (
-    <ChartWrapper loading={loading} height="245px" maxWidth="430px">
+    <ChartWrapper loading={loading} height="calc(100% - 72px)" maxWidth="430px">
       <StyleChart>
         <Chart>
           <Settings
@@ -59,7 +60,9 @@ export function VisitorBreakdownChart({ loading, options }: Props) {
           />
           <Partition
             id="spec_1"
-            data={options || []}
+            data={
+              options?.length ? options : [{ count: 1, name: I18LABELS.noData }]
+            }
             valueAccessor={(d: Datum) => d.count as number}
             valueGetter="percent"
             percentFormatter={(d: number) =>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx
index cd7fd0af6d683..fcc7b214943ff 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/index.tsx
@@ -25,8 +25,8 @@ export function CoreVitals({ data, loading }: Props) {
   const { lcp, lcpRanks, fid, fidRanks, cls, clsRanks } = data || {};
 
   return (
-    <EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'}>
-      <EuiFlexItem>
+    <EuiFlexGroup gutterSize="xl" justifyContent={'spaceBetween'} wrap>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={LCP_LABEL}
           value={formatToSec(lcp, 'ms')}
@@ -35,7 +35,7 @@ export function CoreVitals({ data, loading }: Props) {
           thresholds={CoreVitalsThresholds.LCP}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={FID_LABEL}
           value={formatToSec(fid, 'ms')}
@@ -44,7 +44,7 @@ export function CoreVitals({ data, loading }: Props) {
           thresholds={CoreVitalsThresholds.FID}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem style={{ flexBasis: 380 }}>
         <CoreVitalItem
           title={CLS_LABEL}
           value={cls ?? '0'}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
index 805b328cb1fb0..6b6f036ca1463 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
@@ -84,6 +84,11 @@ export function JSErrors() {
     });
   };
 
+  const errorRate =
+    totalPageViews > 0
+      ? ((data?.totalErrorPages ?? 0) / totalPageViews) * 100
+      : 0;
+
   return (
     <>
       <EuiTitle size="xs">
@@ -109,10 +114,7 @@ export function JSErrors() {
             title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
               defaultMessage: '{errorRate} %',
               values: {
-                errorRate: (
-                  ((data?.totalErrorPages ?? 0) / totalPageViews) *
-                  100
-                ).toFixed(0),
+                errorRate: errorRate.toFixed(0),
               },
             })}
             description={I18LABELS.errorRate}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
index 7e81dc011bdb5..2abbcb8239aa8 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@@ -10,9 +10,9 @@ import {
   LineAnnotation,
   LineAnnotationDatum,
   LineAnnotationStyle,
+  Position,
 } from '@elastic/charts';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import styled from 'styled-components';
 import { EuiToolTip } from '@elastic/eui';
 
 interface Props {
@@ -28,11 +28,6 @@ function generateAnnotationData(
   }));
 }
 
-const PercentileMarker = styled.span`
-  position: relative;
-  bottom: 205px;
-`;
-
 export function PercentileAnnotations({ percentiles }: Props) {
   const dataValues = generateAnnotationData(percentiles) ?? [];
 
@@ -66,8 +61,9 @@ export function PercentileAnnotations({ percentiles }: Props) {
           dataValues={[annotation]}
           style={style}
           hideTooltips={true}
+          markerPosition={Position.Top}
           marker={
-            <PercentileMarker data-cy="percentile-markers">
+            <span data-cy="percentile-markers">
               <EuiToolTip
                 title={<PercentileTooltip annotation={annotation} />}
                 content={
@@ -76,7 +72,7 @@ export function PercentileAnnotations({ percentiles }: Props) {
               >
                 <>{annotation.details}th</>
               </EuiToolTip>
-            </PercentileMarker>
+            </span>
           }
         />
       ))}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
index 88d14a0213a96..45a40712f90fb 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/index.tsx
@@ -13,6 +13,7 @@ import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageLoadDistChart } from '../Charts/PageLoadDistChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { ResetPercentileZoom } from './ResetPercentileZoom';
+import { FULL_HEIGHT } from '../RumDashboard';
 
 export interface PercentileRange {
   min?: number | null;
@@ -71,7 +72,7 @@ export function PageLoadDistribution() {
   };
 
   return (
-    <div data-cy="pageLoadDist">
+    <div data-cy="pageLoadDist" style={FULL_HEIGHT}>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
index 621098b6028cb..7492096b93898 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageViewsTrend/index.tsx
@@ -12,6 +12,7 @@ import { I18LABELS } from '../translations';
 import { BreakdownFilter } from '../Breakdowns/BreakdownFilter';
 import { PageViewsChart } from '../Charts/PageViewsChart';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
+import { FULL_HEIGHT } from '../RumDashboard';
 
 export function PageViewsTrend() {
   const { urlParams, uiFilters } = useUrlParams();
@@ -48,7 +49,7 @@ export function PageViewsTrend() {
   );
 
   return (
-    <div>
+    <div style={FULL_HEIGHT}>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx
new file mode 100644
index 0000000000000..cdc52c98de971
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/PageLoadAndViews.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
+import { FULL_HEIGHT } from '../RumDashboard';
+import { PageLoadDistribution } from '../PageLoadDistribution';
+import { PageViewsTrend } from '../PageViewsTrend';
+import { useBreakPoints } from '../hooks/useBreakPoints';
+
+export function PageLoadAndViews() {
+  const { isLarge } = useBreakPoints();
+
+  return (
+    <EuiResizableContainer
+      style={FULL_HEIGHT}
+      direction={isLarge ? 'vertical' : 'horizontal'}
+    >
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <PageLoadDistribution />
+            </EuiPanel>
+          </EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <PageViewsTrend />
+            </EuiPanel>
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx
new file mode 100644
index 0000000000000..87ffacbf56f96
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Panels/VisitorBreakdowns.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiPanel, EuiResizableContainer } from '@elastic/eui';
+import { VisitorBreakdown } from '../VisitorBreakdown';
+import { VisitorBreakdownMap } from '../VisitorBreakdownMap';
+import { FULL_HEIGHT } from '../RumDashboard';
+import { useBreakPoints } from '../hooks/useBreakPoints';
+
+export function VisitorBreakdownsPanel() {
+  const { isLarge } = useBreakPoints();
+
+  return (
+    <EuiResizableContainer
+      style={FULL_HEIGHT}
+      direction={isLarge ? 'vertical' : 'horizontal'}
+    >
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <VisitorBreakdown />
+            </EuiPanel>
+          </EuiResizablePanel>
+          <EuiResizableButton />
+          <EuiResizablePanel initialSize={50} minSize="20%">
+            <EuiPanel style={FULL_HEIGHT}>
+              <VisitorBreakdownMap />
+            </EuiPanel>
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
index 37522b06970c1..0004599b1821b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -10,20 +10,24 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiPanel,
+  EuiResizableContainer,
 } from '@elastic/eui';
 import React from 'react';
 import { ClientMetrics } from './ClientMetrics';
-import { PageViewsTrend } from './PageViewsTrend';
-import { PageLoadDistribution } from './PageLoadDistribution';
 import { I18LABELS } from './translations';
-import { VisitorBreakdown } from './VisitorBreakdown';
 import { UXMetrics } from './UXMetrics';
-import { VisitorBreakdownMap } from './VisitorBreakdownMap';
 import { ImpactfulMetrics } from './ImpactfulMetrics';
+import { PageLoadAndViews } from './Panels/PageLoadAndViews';
+import { VisitorBreakdownsPanel } from './Panels/VisitorBreakdowns';
+import { useBreakPoints } from './hooks/useBreakPoints';
+
+export const FULL_HEIGHT = { height: '100%' };
 
 export function RumDashboard() {
+  const { isLarge, isSmall } = useBreakPoints();
+
   return (
-    <EuiFlexGroup direction="column" gutterSize="s">
+    <EuiFlexGroup direction={isSmall ? 'row' : 'column'} gutterSize="s">
       <EuiFlexItem>
         <EuiPanel>
           <EuiFlexGroup justifyContent="spaceBetween">
@@ -41,31 +45,22 @@ export function RumDashboard() {
         <UXMetrics />
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup gutterSize="s" wrap>
-          <EuiFlexItem style={{ flexBasis: 650 }}>
-            <EuiPanel>
-              <PageLoadDistribution />
-            </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem style={{ flexBasis: 650 }}>
-            <EuiPanel>
-              <PageViewsTrend />
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="s">
-          <EuiFlexItem grow={3}>
-            <EuiPanel>
-              <VisitorBreakdown />
-            </EuiPanel>
-          </EuiFlexItem>
-          <EuiFlexItem grow={3}>
-            <EuiPanel>
-              <VisitorBreakdownMap />
-            </EuiPanel>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiResizableContainer
+          style={{ height: isLarge ? '1400px' : '850px' }}
+          direction="vertical"
+        >
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel initialSize={40} minSize="40%">
+                <PageLoadAndViews />
+              </EuiResizablePanel>
+              <EuiResizableButton />
+              <EuiResizablePanel initialSize={60} minSize="10%">
+                <VisitorBreakdownsPanel />
+              </EuiResizablePanel>
+            </>
+          )}
+        </EuiResizableContainer>
       </EuiFlexItem>
       <EuiFlexItem>
         <ImpactfulMetrics />
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index 71a992ae4df82..f30f9ba5af257 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -18,22 +18,20 @@ export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
 
 export function RumHome() {
   return (
-    <div>
-      <CsmSharedContextProvider>
-        <RumHeader>
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={true}>
-              <EuiTitle size="l">
-                <h1>{UX_LABEL}</h1>
-              </EuiTitle>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <UserPercentile />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </RumHeader>
-        <RumOverview />
-      </CsmSharedContextProvider>
-    </div>
+    <CsmSharedContextProvider>
+      <RumHeader>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={true}>
+            <EuiTitle size="l">
+              <h1>{UX_LABEL}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <UserPercentile />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </RumHeader>
+      <RumOverview />
+    </CsmSharedContextProvider>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
index 37836a2c47d64..53722658cafef 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx
@@ -57,7 +57,7 @@ export function KeyUXMetrics({ data, loading }: Props) {
 
   // Note: FCP value is in ms unit
   return (
-    <EuiFlexGroup responsive={false}>
+    <EuiFlexGroup wrap>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx
index 910c37c6ccbaa..f43be5beece88 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/index.tsx
@@ -59,7 +59,7 @@ export function UXMetrics() {
 
   return (
     <EuiPanel>
-      <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexGroup justifyContent="spaceBetween" wrap>
         <EuiFlexItem grow={1} data-cy={`client-metrics`}>
           <EuiTitle size="s">
             <h2>{I18LABELS.userExperienceMetrics}</h2>
@@ -70,7 +70,7 @@ export function UXMetrics() {
       </EuiFlexGroup>
       <EuiHorizontalRule />
 
-      <EuiFlexGroup justifyContent="spaceBetween">
+      <EuiFlexGroup justifyContent="spaceBetween" wrap>
         <EuiFlexItem grow={1} data-cy={`client-metrics`}>
           <EuiTitle size="xs">
             <h3>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
index 092c416303bb5..67127f9c2fd81 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdown/index.tsx
@@ -44,7 +44,7 @@ export function VisitorBreakdown() {
         <h3>{VisitorBreakdownLabel}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiFlexGroup>
+      <EuiFlexGroup style={{ height: 'calc(100% - 32px)' }}>
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h4>{I18LABELS.browser}</h4>
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts
new file mode 100644
index 0000000000000..ea7b155045fdc
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useBreakPoints.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useState } from 'react';
+import useWindowSize from 'react-use/lib/useWindowSize';
+import useDebounce from 'react-use/lib/useDebounce';
+import { isWithinMaxBreakpoint } from '@elastic/eui';
+
+export function useBreakPoints() {
+  const [screenSizes, setScreenSizes] = useState({
+    isSmall: false,
+    isMedium: false,
+    isLarge: false,
+    isXl: false,
+  });
+
+  const { width } = useWindowSize();
+
+  useDebounce(
+    () => {
+      const windowWidth = window.innerWidth;
+
+      setScreenSizes({
+        isSmall: isWithinMaxBreakpoint(windowWidth, 's'),
+        isMedium: isWithinMaxBreakpoint(windowWidth, 'm'),
+        isLarge: isWithinMaxBreakpoint(windowWidth, 'l'),
+        isXl: isWithinMaxBreakpoint(windowWidth, 'xl'),
+      });
+    },
+    50,
+    [width]
+  );
+
+  return screenSizes;
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
index dd7721d9f7129..fd118096526d7 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -150,6 +150,9 @@ export const I18LABELS = {
   percentile99th: i18n.translate('xpack.apm.ux.percentile.99th', {
     defaultMessage: '99th',
   }),
+  noData: i18n.translate('xpack.apm.ux.visitorBreakdown.noData', {
+    defaultMessage: 'No data.',
+  }),
 };
 
 export const VisitorBreakdownLabel = i18n.translate(
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts b/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts
index 7345d6acc0f82..52d089e4e29c9 100644
--- a/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_visitor_breakdown.ts
@@ -74,20 +74,24 @@ export async function getVisitorBreakdown({
     name: bucket.key as string,
   }));
 
-  browserItems.push({
-    count: totalItems - browserTotal,
-    name: 'Others',
-  });
+  if (totalItems > 0) {
+    browserItems.push({
+      count: totalItems - browserTotal,
+      name: 'Others',
+    });
+  }
 
   const osItems = os.buckets.map((bucket) => ({
     count: bucket.doc_count,
     name: bucket.key as string,
   }));
 
-  osItems.push({
-    count: totalItems - osTotal,
-    name: 'Others',
-  });
+  if (totalItems > 0) {
+    osItems.push({
+      count: totalItems - osTotal,
+      name: 'Others',
+    });
+  }
 
   return {
     os: osItems,