diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
index 6425eba01d3c8f..ee71e4d8c8674d 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
@@ -9,8 +9,8 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { getNodeName, NodeType } from '../../../../common/connections';
 import { useApmParams } from '../../../hooks/use_apm_params';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
+import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../shared/dependencies_table';
 import { ServiceLink } from '../../shared/service_link';
 import { useTimeRange } from '../../../hooks/use_time_range';
@@ -30,7 +30,12 @@ export function BackendDetailDependenciesTable() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
index 9fb53ab15d374f..5ecb41829f06c4 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx
@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { asPercent } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -17,6 +16,10 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -28,12 +31,26 @@ export function BackendFailedTransactionRateChart({
   height: number;
 }) {
   const {
-    query: { backendName, kuery, environment, rangeFrom, rangeTo },
+    query: {
+      backendName,
+      kuery,
+      environment,
+      rangeFrom,
+      rangeTo,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
index 9d95b58fe24de4..8289ac01b7b27d 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx
@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -21,15 +20,33 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendLatencyChart({ height }: { height: number }) {
   const {
-    query: { backendName, rangeFrom, rangeTo, kuery, environment },
+    query: {
+      backendName,
+      rangeFrom,
+      rangeTo,
+      kuery,
+      environment,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
index c293561f780b10..c8a37146d60a49 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx
@@ -7,7 +7,6 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { asTransactionRate } from '../../../../common/utils/formatters';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { Coordinate, TimeSeries } from '../../../../typings/timeseries';
@@ -17,15 +16,33 @@ import {
   ChartType,
   getTimeSeriesColor,
 } from '../../shared/charts/helper/get_timeseries_color';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendThroughputChart({ height }: { height: number }) {
   const {
-    query: { backendName, rangeFrom, rangeTo, kuery, environment },
+    query: {
+      backendName,
+      rangeFrom,
+      rangeTo,
+      kuery,
+      environment,
+      comparisonEnabled,
+      comparisonType,
+    },
   } = useApmParams('/backends/overview');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset, comparisonChartTheme } = useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
index 33de388483df9a..fa7cf4a3ba2421 100644
--- a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
@@ -11,11 +11,11 @@ import React from 'react';
 import { useUiTracker } from '../../../../../../observability/public';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmParams } from '../../../../hooks/use_apm_params';
-import { useComparison } from '../../../../hooks/use_comparison';
 import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../../hooks/use_time_range';
 import { BackendLink } from '../../../shared/backend_link';
 import { DependenciesTable } from '../../../shared/dependencies_table';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 export function BackendInventoryDependenciesTable() {
   const {
@@ -33,7 +33,12 @@ export function BackendInventoryDependenciesTable() {
 
   const trackEvent = useUiTracker();
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const { data, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
index 60b32691128e96..7d90ee6824de95 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
@@ -20,10 +20,10 @@ import { ChartPointerEventContextProvider } from '../../../context/chart_pointer
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { useComparison } from '../../../hooks/use_comparison';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
 import { FailedTransactionRateChart } from '../../shared/charts/failed_transaction_rate_chart';
+import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import { ErrorDistribution } from '../error_group_details/distribution';
 import { ErrorGroupList } from './error_group_list';
 
@@ -56,13 +56,18 @@ export function ErrorGroupOverview() {
       sortDirection,
       rangeFrom,
       rangeTo,
+      comparisonType,
       comparisonEnabled,
     },
   } = useApmParams('/services/{serviceName}/errors');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-  const { comparisonStart, comparisonEnd } = useComparison();
-
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
   const { errorDistributionData, status } = useErrorGroupDistributionFetcher({
     serviceName,
     groupId: undefined,
diff --git a/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx b/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx
index d10732d98426ff..facc3a9dbc5821 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/popover/backend_contents.tsx
@@ -14,10 +14,10 @@ import { useUiTracker } from '../../../../../../observability/public';
 import { ContentsProps } from '.';
 import { useAnyOfApmParams } from '../../../../hooks/use_apm_params';
 import { useApmRouter } from '../../../../hooks/use_apm_router';
-import { useComparison } from '../../../../hooks/use_comparison';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { ApmRoutes } from '../../../routing/apm_route_config';
 import { StatsList } from './stats_list';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 
 type BackendReturn = APIReturnType<'GET /internal/apm/service-map/backend'>;
@@ -38,7 +38,14 @@ export function BackendContents({
     '/services/{serviceName}/service-map'
   );
 
-  const { offset } = useComparison();
+  const { comparisonEnabled, comparisonType } = query;
+
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const apmRouter = useApmRouter();
 
diff --git a/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx b/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx
index b13b4322f4ebc6..1d2b36c840b0be 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/popover/service_contents.tsx
@@ -22,7 +22,7 @@ import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { AnomalyDetection } from './anomaly_detection';
 import { StatsList } from './stats_list';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { useComparison } from '../../../../hooks/use_comparison';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 
 type ServiceNodeReturn =
@@ -51,11 +51,16 @@ export function ServiceContents({
     throw new Error('Expected rangeFrom and rangeTo to be set');
   }
 
-  const { rangeFrom, rangeTo, comparisonEnabled } = query;
+  const { rangeFrom, rangeTo, comparisonEnabled, comparisonType } = query;
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const serviceName = nodeData.id!;
   const serviceGroup = ('serviceGroup' in query && query.serviceGroup) || '';
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 66cf8973a1c4f7..7bfd9684fb2490 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
@@ -17,7 +17,7 @@ import { useTimeRange } from '../../../../hooks/use_time_range';
 import { BackendLink } from '../../../shared/backend_link';
 import { DependenciesTable } from '../../../shared/dependencies_table';
 import { ServiceLink } from '../../../shared/service_link';
-import { useComparison } from '../../../../hooks/use_comparison';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 
 interface ServiceOverviewDependenciesTableProps {
   fixedHeight?: boolean;
@@ -46,7 +46,12 @@ export function ServiceOverviewDependenciesTable({
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { offset } = useComparison();
+  const { offset } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonEnabled,
+    comparisonType,
+  });
 
   const { serviceName, transactionType } = useApmServiceContext();
 
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index d39c32aa25e9d1..8eb5158f304c5b 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -16,9 +16,9 @@ import { orderBy } from 'lodash';
 import React, { useState } from 'react';
 import uuid from 'uuid';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
-import { useComparison } from '../../../../hooks/use_comparison';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import { ErrorOverviewLink } from '../../../shared/links/apm/error_overview_link';
+import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { OverviewTableContainer } from '../../../shared/overview_table_container';
 import { getColumns } from './get_columns';
 import { useApmParams } from '../../../../hooks/use_apm_params';
@@ -81,7 +81,12 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = useComparison();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { pageIndex, sort } = tableOptions;
   const { direction, field } = sort;
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
index 338c6ce8a4fc4e..dfea13eaaf476b 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_chart_and_table.tsx
@@ -11,11 +11,11 @@ import React, { useState } from 'react';
 import uuid from 'uuid';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
-import { useComparison } from '../../../hooks/use_comparison';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
 import { InstancesLatencyDistributionChart } from '../../shared/charts/instances_latency_distribution_chart';
+import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison';
 import {
   ServiceOverviewInstancesTable,
   TableOptions,
@@ -86,7 +86,12 @@ export function ServiceOverviewInstancesChartAndTable({
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = useComparison();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const {
     data: mainStatsData = INITIAL_STATE_MAIN_STATS,
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
index cae35f6137be22..a0a8f7babe640d 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_throughput_chart.tsx
@@ -20,10 +20,13 @@ import { useApmServiceContext } from '../../../context/apm_service/use_apm_servi
 import { useEnvironmentsContext } from '../../../context/environments_context/use_environments_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { useComparison } from '../../../hooks/use_comparison';
 import { usePreferredServiceAnomalyTimeseries } from '../../../hooks/use_preferred_service_anomaly_timeseries';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { TimeseriesChart } from '../../shared/charts/timeseries_chart';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../shared/time_comparison/get_time_range_comparison';
 import {
   ChartType,
   getTimeSeriesColor,
@@ -44,7 +47,7 @@ export function ServiceOverviewThroughputChart({
   transactionName?: string;
 }) {
   const {
-    query: { rangeFrom, rangeTo, comparisonEnabled },
+    query: { rangeFrom, rangeTo, comparisonEnabled, comparisonType },
   } = useApmParams('/services/{serviceName}');
 
   const { environment } = useEnvironmentsContext();
@@ -57,8 +60,13 @@ export function ServiceOverviewThroughputChart({
 
   const { transactionType, serviceName } = useApmServiceContext();
 
-  const { comparisonStart, comparisonEnd, comparisonChartTheme } =
-    useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
index 3f535ae164c511..327664925d5b16 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
@@ -30,6 +30,7 @@ export function TransactionDetails() {
     rangeTo,
     transactionType: transactionTypeFromUrl,
     comparisonEnabled,
+    comparisonType,
   } = query;
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
   const apmRouter = useApmRouter();
@@ -73,6 +74,7 @@ export function TransactionDetails() {
           transactionName={transactionName}
           isServerlessContext={isServerless}
           comparisonEnabled={comparisonEnabled}
+          comparisonType={comparisonType}
         />
       </ChartPointerEventContextProvider>
 
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index c97f395975c7bd..68315fc3b2b021 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -26,6 +26,7 @@ export function TransactionOverview() {
       rangeTo,
       transactionType: transactionTypeFromUrl,
       comparisonEnabled,
+      comparisonType,
     },
   } = useApmParams('/services/{serviceName}/transactions');
 
@@ -68,6 +69,7 @@ export function TransactionOverview() {
         end={end}
         isServerlessContext={isServerless}
         comparisonEnabled={comparisonEnabled}
+        comparisonType={comparisonType}
       />
       <EuiSpacer size="s" />
       <EuiPanel hasBorder={true}>
diff --git a/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
index 53b8bae57c146e..a968bf31860862 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/failed_transaction_rate_chart/index.tsx
@@ -16,9 +16,12 @@ import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { TimeseriesChart } from '../timeseries_chart';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../time_comparison/get_time_range_comparison';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { useComparison } from '../../../../hooks/use_comparison';
 import { useEnvironmentsContext } from '../../../../context/environments_context/use_environments_context';
 import { ApmMlDetectorType } from '../../../../../common/anomaly_detection/apm_ml_detectors';
 import { usePreferredServiceAnomalyTimeseries } from '../../../../hooks/use_preferred_service_anomaly_timeseries';
@@ -58,7 +61,7 @@ export function FailedTransactionRateChart({
   } = useLegacyUrlParams();
 
   const {
-    query: { rangeFrom, rangeTo, comparisonEnabled },
+    query: { rangeFrom, rangeTo, comparisonEnabled, comparisonType },
   } = useApmParams('/services/{serviceName}');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
@@ -71,8 +74,13 @@ export function FailedTransactionRateChart({
 
   const { serviceName, transactionType, alerts } = useApmServiceContext();
 
-  const { comparisonChartTheme, comparisonStart, comparisonEnd } =
-    useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const { data = INITIAL_STATE, status } = useFetcher(
     (callApmApi) => {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
index fe4e95de4571c1..a2bfad0175a5f9 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_charts/index.tsx
@@ -14,6 +14,7 @@ import { LatencyChart } from '../latency_chart';
 import { TransactionBreakdownChart } from '../transaction_breakdown_chart';
 import { TransactionColdstartRateChart } from '../transaction_coldstart_rate_chart';
 import { FailedTransactionRateChart } from '../failed_transaction_rate_chart';
+import { TimeRangeComparisonType } from '../../../../../common/runtime_types/comparison_type_rt';
 
 export function TransactionCharts({
   kuery,
@@ -23,6 +24,7 @@ export function TransactionCharts({
   transactionName,
   isServerlessContext,
   comparisonEnabled,
+  comparisonType,
 }: {
   kuery: string;
   environment: string;
@@ -31,6 +33,7 @@ export function TransactionCharts({
   transactionName?: string;
   isServerlessContext?: boolean;
   comparisonEnabled?: boolean;
+  comparisonType?: TimeRangeComparisonType;
 }) {
   return (
     <>
@@ -68,6 +71,7 @@ export function TransactionCharts({
                   transactionName={transactionName}
                   environment={environment}
                   comparisonEnabled={comparisonEnabled}
+                  comparisonType={comparisonType}
                 />
               </EuiFlexItem>
             ) : (
diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
index 557d645083302a..b6558bea79d3ed 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
@@ -20,9 +20,13 @@ import { useFetcher } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
 import { TimeseriesChart } from '../timeseries_chart';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
+import {
+  getComparisonChartTheme,
+  getTimeRangeComparison,
+} from '../../time_comparison/get_time_range_comparison';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useTimeRange } from '../../../../hooks/use_time_range';
-import { useComparison } from '../../../../hooks/use_comparison';
+import { TimeRangeComparisonType } from '../../../../../common/runtime_types/comparison_type_rt';
 
 function yLabelFormat(y?: number | null) {
   return asPercent(y || 0, 1);
@@ -35,6 +39,7 @@ interface Props {
   environment: string;
   transactionName?: string;
   comparisonEnabled?: boolean;
+  comparisonType?: TimeRangeComparisonType;
 }
 
 type ColdstartRate =
@@ -58,6 +63,7 @@ export function TransactionColdstartRateChart({
   kuery,
   transactionName,
   comparisonEnabled,
+  comparisonType,
 }: Props) {
   const theme = useTheme();
 
@@ -68,8 +74,13 @@ export function TransactionColdstartRateChart({
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
   const { serviceName, transactionType } = useApmServiceContext();
-  const { comparisonChartTheme, comparisonStart, comparisonEnd } =
-    useComparison();
+  const comparisonChartTheme = getComparisonChartTheme();
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
 
   const endpoint = transactionName
     ? ('GET /internal/apm/services/{serviceName}/transactions/charts/coldstart_rate_by_transaction_name' as const)
diff --git a/x-pack/plugins/apm/public/hooks/use_comparison.ts b/x-pack/plugins/apm/public/hooks/use_comparison.ts
deleted file mode 100644
index d9cb88f483e86f..00000000000000
--- a/x-pack/plugins/apm/public/hooks/use_comparison.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import {
-  getComparisonChartTheme,
-  getTimeRangeComparison,
-} from '../components/shared/time_comparison/get_time_range_comparison';
-import { useLegacyUrlParams } from '../context/url_params_context/use_url_params';
-import { useApmParams } from './use_apm_params';
-import { useTimeRange } from './use_time_range';
-
-export function useComparison() {
-  const comparisonChartTheme = getComparisonChartTheme();
-  const { query } = useApmParams('/*');
-
-  if (!('rangeFrom' in query && 'rangeTo' in query)) {
-    throw new Error('rangeFrom or rangeTo not defined in query');
-  }
-
-  const { start, end } = useTimeRange({
-    rangeFrom: query.rangeFrom,
-    rangeTo: query.rangeTo,
-  });
-
-  const {
-    urlParams: { comparisonType, comparisonEnabled },
-  } = useLegacyUrlParams();
-
-  const { comparisonStart, comparisonEnd, offset } = getTimeRangeComparison({
-    start,
-    end,
-    comparisonType,
-    comparisonEnabled,
-  });
-
-  return {
-    comparisonStart,
-    comparisonEnd,
-    offset,
-    comparisonChartTheme,
-  };
-}
diff --git a/x-pack/plugins/apm/public/hooks/use_error_group_distribution_fetcher.tsx b/x-pack/plugins/apm/public/hooks/use_error_group_distribution_fetcher.tsx
index ce5d327d5cebfe..62e2ab92c4fcc1 100644
--- a/x-pack/plugins/apm/public/hooks/use_error_group_distribution_fetcher.tsx
+++ b/x-pack/plugins/apm/public/hooks/use_error_group_distribution_fetcher.tsx
@@ -4,10 +4,10 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { getTimeRangeComparison } from '../components/shared/time_comparison/get_time_range_comparison';
 import { useApmParams } from './use_apm_params';
 import { useFetcher } from './use_fetcher';
 import { useTimeRange } from './use_time_range';
-import { useComparison } from './use_comparison';
 
 export function useErrorGroupDistributionFetcher({
   serviceName,
@@ -21,12 +21,16 @@ export function useErrorGroupDistributionFetcher({
   environment: string;
 }) {
   const {
-    query: { rangeFrom, rangeTo },
+    query: { rangeFrom, rangeTo, comparisonEnabled, comparisonType },
   } = useApmParams('/services/{serviceName}/errors');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-  const { comparisonStart, comparisonEnd } = useComparison();
-
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (start && end) {
diff --git a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
index b8d3ed1d8fef9e..8dbc1f3a475052 100644
--- a/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
+++ b/x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts
@@ -10,9 +10,9 @@ import { useFetcher } from './use_fetcher';
 import { useLegacyUrlParams } from '../context/url_params_context/use_url_params';
 import { useApmServiceContext } from '../context/apm_service/use_apm_service_context';
 import { getLatencyChartSelector } from '../selectors/latency_chart_selectors';
+import { getTimeRangeComparison } from '../components/shared/time_comparison/get_time_range_comparison';
 import { useTimeRange } from './use_time_range';
 import { useApmParams } from './use_apm_params';
-import { useComparison } from './use_comparison';
 
 export function useTransactionLatencyChartsFetcher({
   kuery,
@@ -27,13 +27,17 @@ export function useTransactionLatencyChartsFetcher({
   } = useLegacyUrlParams();
 
   const {
-    query: { rangeFrom, rangeTo },
+    query: { rangeFrom, rangeTo, comparisonType, comparisonEnabled },
   } = useApmParams('/services/{serviceName}');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  const { comparisonStart, comparisonEnd } = useComparison();
-
+  const { comparisonStart, comparisonEnd } = getTimeRangeComparison({
+    start,
+    end,
+    comparisonType,
+    comparisonEnabled,
+  });
   const { data, error, status } = useFetcher(
     (callApmApi) => {
       if (