diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx
index c31f58f488947..e778a7f75446b 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -32,7 +32,7 @@ export function TransactionDetails() {
   const { data: waterfall } = useWaterfall(urlParams);
   const transaction = waterfall.getTransactionById(urlParams.transactionId);
 
-  const { start, end, serviceName, transactionName } = urlParams;
+  const { transactionName } = urlParams;
 
   return (
     <div>
@@ -42,16 +42,9 @@ export function TransactionDetails() {
         </EuiTitle>
       </ApmHeader>
 
-      {serviceName && transactionName ? (
-        <EuiPanel>
-          <TransactionBreakdown
-            start={start}
-            end={end}
-            serviceName={serviceName}
-            transactionName={transactionName}
-          />
-        </EuiPanel>
-      ) : null}
+      <EuiPanel>
+        <TransactionBreakdown />
+      </EuiPanel>
 
       <EuiSpacer size="s" />
 
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
index bf600a19f3f0c..bb08e0f6e486b 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -32,20 +32,10 @@ const NoTransactionsTitle = styled.span`
   font-weight: bold;
 `;
 
-const TransactionBreakdown: React.FC<{
-  serviceName: string;
-  transactionName?: string;
-  start: string | undefined;
-  end: string | undefined;
-}> = ({ serviceName, start, end, transactionName }) => {
+const TransactionBreakdown: React.FC = () => {
   const [showChart, setShowChart] = useState(false);
 
-  const { data, status } = useTransactionBreakdown({
-    serviceName,
-    start,
-    end,
-    transactionName
-  });
+  const { data, status } = useTransactionBreakdown();
 
   const kpis = useMemo(
     () => {
diff --git a/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts b/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts
index 5e60e9a0fa3a7..01a9d7d46a47e 100644
--- a/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts
+++ b/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts
@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { IUrlParams } from '../context/UrlParamsContext/types';
-import { useUiFilters } from '../context/UrlParamsContext';
 import { useFetcher } from './useFetcher';
 import { callApi } from '../services/rest/callApi';
 import { getUiFiltersES } from '../services/ui_filters/get_ui_filters_es';
 import { TransactionBreakdownAPIResponse } from '../../server/lib/transactions/breakdown';
+import { useUrlParams } from './useUrlParams';
 
-export function useTransactionBreakdown(urlParams: IUrlParams) {
-  const { serviceName, start, end, transactionName } = urlParams;
-
-  const uiFilters = useUiFilters(urlParams);
+export function useTransactionBreakdown() {
+  const {
+    urlParams: { serviceName, start, end, transactionName },
+    uiFilters
+  } = useUrlParams();
 
   const { data, error, status } = useFetcher(
     async () => {