diff --git a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx
index 35516c1da58fd..7b7a4089172bf 100644
--- a/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx
@@ -63,7 +63,8 @@ export function DependencyDetailOperationsList() {
 
   const { core } = useApmPluginContext();
 
-  const breakpoints = useBreakpoints();
+  const { isLarge } = useBreakpoints();
+  const shouldShowSparkPlots = !isLarge;
 
   const { start, end } = useTimeRange({
     rangeFrom,
@@ -147,7 +148,7 @@ export function DependencyDetailOperationsList() {
       render: (_, { spanName }) => <OperationLink spanName={spanName} />,
     },
     ...getSpanMetricColumns({
-      breakpoints,
+      shouldShowSparkPlots,
       comparisonFetchStatus: comparisonStatsFetch.status,
     }),
   ];
diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx
index 55104eefaa071..dd0e2cd9968cc 100644
--- a/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/mobile/service_overview/index.tsx
@@ -193,7 +193,6 @@ export function MobileServiceOverview() {
                     kuery={kueryWithMobileFilters}
                     environment={environment}
                     fixedHeight={true}
-                    isSingleColumn={isSingleColumn}
                     start={start}
                     end={end}
                     showPerPageOptions={false}
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
index 4b2ab0ad6c3a8..743843c825210 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
@@ -135,11 +135,11 @@ export function ServiceOverview() {
                     kuery={kuery}
                     environment={environment}
                     fixedHeight={true}
-                    isSingleColumn={isSingleColumn}
                     start={start}
                     end={end}
                     showPerPageOptions={false}
                     numberOfTransactionsPerPage={5}
+                    showSparkPlots={!isSingleColumn}
                   />
                 </EuiPanel>
               </EuiFlexItem>
@@ -209,6 +209,7 @@ export function ServiceOverview() {
                           )}
                         </EuiLink>
                       }
+                      showSparkPlots={!isSingleColumn}
                     />
                   </EuiPanel>
                 </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
index f95905dd3dc57..e8c9dffa375b0 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -24,12 +24,14 @@ interface ServiceOverviewDependenciesTableProps {
   fixedHeight?: boolean;
   link?: ReactNode;
   showPerPageOptions?: boolean;
+  showSparkPlots?: boolean;
 }
 
 export function ServiceOverviewDependenciesTable({
   fixedHeight,
   link,
   showPerPageOptions = true,
+  showSparkPlots,
 }: ServiceOverviewDependenciesTableProps) {
   const {
     query: {
@@ -171,6 +173,7 @@ export function ServiceOverviewDependenciesTable({
       link={link}
       showPerPageOptions={showPerPageOptions}
       initialPageSize={5}
+      showSparkPlots={showSparkPlots}
     />
   );
 }
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx
index d477e7269cace..07d1b75ffb238 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx
@@ -13,7 +13,6 @@ import {
   RIGHT_ALIGNMENT,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Breakpoints } from '../../../hooks/use_breakpoints';
 import {
   ChartType,
   getTimeSeriesColor,
@@ -53,14 +52,12 @@ export interface SpanMetricGroup {
 }
 
 export function getSpanMetricColumns({
-  breakpoints,
   comparisonFetchStatus,
+  shouldShowSparkPlots,
 }: {
-  breakpoints: Breakpoints;
   comparisonFetchStatus: FETCH_STATUS;
+  shouldShowSparkPlots: boolean;
 }): Array<ITableColumn<SpanMetricGroup>> {
-  const { isLarge } = breakpoints;
-  const shouldShowSparkPlots = !isLarge;
   const isLoading = isPending(comparisonFetchStatus);
 
   return [
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index c4d1a0bdaffe1..dec4f35327e57 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -38,6 +38,7 @@ interface Props {
   status: FETCH_STATUS;
   compact?: boolean;
   showPerPageOptions?: boolean;
+  showSparkPlots?: boolean;
 }
 
 type FormattedSpanMetricGroup = SpanMetricGroup & {
@@ -56,10 +57,11 @@ export function DependenciesTable(props: Props) {
     compact = true,
     showPerPageOptions = true,
     initialPageSize,
+    showSparkPlots,
   } = props;
 
-  // SparkPlots should be hidden if we're in two-column view and size XL (1200px)
-  const breakpoints = useBreakpoints();
+  const { isLarge } = useBreakpoints();
+  const shouldShowSparkPlots = showSparkPlots ?? !isLarge;
 
   const items: FormattedSpanMetricGroup[] = dependencies.map((dependency) => ({
     name: dependency.name,
@@ -95,7 +97,7 @@ export function DependenciesTable(props: Props) {
       width: '30%',
     },
     ...getSpanMetricColumns({
-      breakpoints,
+      shouldShowSparkPlots,
       comparisonFetchStatus: status,
     }),
   ];
diff --git a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
index e4553dfee073a..0d9621efd18c8 100644
--- a/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/transactions_table/index.tsx
@@ -48,7 +48,6 @@ const INITIAL_STATE: ApiResponse & { requestId: string } = {
 interface Props {
   hideTitle?: boolean;
   hideViewTransactionsLink?: boolean;
-  isSingleColumn?: boolean;
   numberOfTransactionsPerPage?: number;
   showPerPageOptions?: boolean;
   showMaxTransactionGroupsExceededWarning?: boolean;
@@ -58,13 +57,13 @@ interface Props {
   start: string;
   end: string;
   saveTableOptionsToUrl?: boolean;
+  showSparkPlots?: boolean;
 }
 
 export function TransactionsTable({
   fixedHeight = false,
   hideViewTransactionsLink = false,
   hideTitle = false,
-  isSingleColumn = true,
   numberOfTransactionsPerPage = 10,
   showPerPageOptions = true,
   showMaxTransactionGroupsExceededWarning = false,
@@ -73,6 +72,7 @@ export function TransactionsTable({
   start,
   end,
   saveTableOptionsToUrl = false,
+  showSparkPlots,
 }: Props) {
   const { link } = useApmRouter();
 
@@ -94,9 +94,8 @@ export function TransactionsTable({
     latencyAggregationTypeFromQuery
   );
 
-  // SparkPlots should be hidden if we're in two-column view and size XL (1200px)
-  const { isXl } = useBreakpoints();
-  const shouldShowSparkPlots = isSingleColumn || !isXl;
+  const { isLarge } = useBreakpoints();
+  const shouldShowSparkPlots = showSparkPlots ?? !isLarge;
   const { transactionType, serviceName } = useApmServiceContext();
   const [searchQuery, setSearchQueryDebounced] = useStateDebounced('');