diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
index df48e65fd1f75..8fd8edd7f8a72 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/__test__/get_error_marks.test.ts
@@ -10,14 +10,14 @@ import { getErrorMarks } from '../get_error_marks';
 describe('getErrorMarks', () => {
   describe('returns empty array', () => {
     it('when items are missing', () => {
-      expect(getErrorMarks([])).toEqual([]);
+      expect(getErrorMarks([], {})).toEqual([]);
     });
     it('when any error is available', () => {
       const items = [
         { docType: 'span' },
         { docType: 'transaction' }
       ] as IWaterfallItem[];
-      expect(getErrorMarks(items)).toEqual([]);
+      expect(getErrorMarks(items, {})).toEqual([]);
     });
   });
 
@@ -27,34 +27,70 @@ describe('getErrorMarks', () => {
         docType: 'error',
         offset: 10,
         skew: 5,
-        custom: { error: { id: 1 } },
-        serviceColor: 'blue'
+        doc: { error: { id: 1 }, service: { name: 'opbeans-java' } }
       } as unknown,
       { docType: 'transaction' },
       {
         docType: 'error',
         offset: 50,
         skew: 0,
-        custom: { error: { id: 2 } },
-        serviceColor: 'red'
+        doc: { error: { id: 2 }, service: { name: 'opbeans-node' } }
       } as unknown
     ] as IWaterfallItem[];
-    expect(getErrorMarks(items)).toEqual([
+    expect(
+      getErrorMarks(items, { 'opbeans-java': 'red', 'opbeans-node': 'blue' })
+    ).toEqual([
       {
         type: 'errorMark',
         offset: 15,
         verticalLine: false,
         id: 1,
-        error: { error: { id: 1 } },
+        error: { error: { id: 1 }, service: { name: 'opbeans-java' } },
+        serviceColor: 'red'
+      },
+      {
+        type: 'errorMark',
+        offset: 50,
+        verticalLine: false,
+        id: 2,
+        error: { error: { id: 2 }, service: { name: 'opbeans-node' } },
         serviceColor: 'blue'
+      }
+    ]);
+  });
+
+  it('returns error marks without service color', () => {
+    const items = [
+      {
+        docType: 'error',
+        offset: 10,
+        skew: 5,
+        doc: { error: { id: 1 }, service: { name: 'opbeans-java' } }
+      } as unknown,
+      { docType: 'transaction' },
+      {
+        docType: 'error',
+        offset: 50,
+        skew: 0,
+        doc: { error: { id: 2 }, service: { name: 'opbeans-node' } }
+      } as unknown
+    ] as IWaterfallItem[];
+    expect(getErrorMarks(items, {})).toEqual([
+      {
+        type: 'errorMark',
+        offset: 15,
+        verticalLine: false,
+        id: 1,
+        error: { error: { id: 1 }, service: { name: 'opbeans-java' } },
+        serviceColor: undefined
       },
       {
         type: 'errorMark',
         offset: 50,
         verticalLine: false,
         id: 2,
-        error: { error: { id: 2 } },
-        serviceColor: 'red'
+        error: { error: { id: 2 }, service: { name: 'opbeans-node' } },
+        serviceColor: undefined
       }
     ]);
   });
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
index 83e9e21e3a58a..f1f0163a49d10 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks.ts
@@ -7,7 +7,8 @@ import { isEmpty } from 'lodash';
 import { ErrorRaw } from '../../../../../../../typings/es_schemas/raw/ErrorRaw';
 import {
   IWaterfallItem,
-  IWaterfallError
+  IWaterfallError,
+  IServiceColors
 } from '../Waterfall/waterfall_helpers/waterfall_helpers';
 import { Mark } from '.';
 
@@ -17,7 +18,10 @@ export interface ErrorMark extends Mark {
   serviceColor?: string;
 }
 
-export const getErrorMarks = (items: IWaterfallItem[]): ErrorMark[] => {
+export const getErrorMarks = (
+  items: IWaterfallItem[],
+  serviceColors: IServiceColors
+): ErrorMark[] => {
   if (isEmpty(items)) {
     return [];
   }
@@ -30,6 +34,6 @@ export const getErrorMarks = (items: IWaterfallItem[]): ErrorMark[] => {
     verticalLine: false,
     id: error.doc.error.id,
     error: error.doc,
-    serviceColor: error.serviceColor
+    serviceColor: serviceColors[error.doc.service.name]
   }));
 };
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
index 791c5f36c1fd8..8a82547d717db 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
@@ -124,9 +124,7 @@ const SpanActionToolTip: React.FC<SpanActionToolTipProps> = ({
 }) => {
   if (item?.docType === 'span') {
     return (
-      <EuiToolTip
-        content={`${item.doc.span.subtype}.${item.doc.span.action}`}
-      >
+      <EuiToolTip content={`${item.doc.span.subtype}.${item.doc.span.action}`}>
         <>{children}</>
       </EuiToolTip>
     );
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
index abc54408827c6..b48fc1cf7ca27 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -80,7 +80,7 @@ export const Waterfall: React.FC<Props> = ({
   const { serviceColors, duration } = waterfall;
 
   const agentMarks = getAgentMarks(waterfall.entryTransaction);
-  const errorMarks = getErrorMarks(waterfall.items);
+  const errorMarks = getErrorMarks(waterfall.items, serviceColors);
 
   const renderWaterfallItem = (item: IWaterfallItem) => {
     if (item.docType === 'error') {
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
index f5f93e235d54d..035e5de3c04d1 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/__snapshots__/waterfall_helpers.test.ts.snap
@@ -31,7 +31,7 @@ Object {
   },
   "items": Array [
     Object {
-      "custom": Object {
+      "doc": Object {
         "processor": Object {
           "event": "transaction",
         },
@@ -61,7 +61,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "myTransactionId1",
         },
@@ -93,7 +93,7 @@ Object {
       "id": "mySpanIdD",
       "offset": 1754,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "processor": Object {
             "event": "transaction",
           },
@@ -126,7 +126,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdD",
         },
@@ -162,7 +162,7 @@ Object {
       "id": "myTransactionId2",
       "offset": 39298,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "myTransactionId1",
           },
@@ -194,7 +194,7 @@ Object {
         "id": "mySpanIdD",
         "offset": 1754,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "processor": Object {
               "event": "transaction",
             },
@@ -230,7 +230,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "myTransactionId2",
         },
@@ -262,7 +262,7 @@ Object {
       "id": "mySpanIdA",
       "offset": 40498,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "mySpanIdD",
           },
@@ -298,7 +298,7 @@ Object {
         "id": "myTransactionId2",
         "offset": 39298,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "parent": Object {
               "id": "myTransactionId1",
             },
@@ -330,7 +330,7 @@ Object {
           "id": "mySpanIdD",
           "offset": 1754,
           "parent": Object {
-            "custom": Object {
+            "doc": Object {
               "processor": Object {
                 "event": "transaction",
               },
@@ -369,7 +369,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdA",
         },
@@ -401,7 +401,7 @@ Object {
       "id": "mySpanIdB",
       "offset": 41627,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "myTransactionId2",
           },
@@ -433,7 +433,7 @@ Object {
         "id": "mySpanIdA",
         "offset": 40498,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "parent": Object {
               "id": "mySpanIdD",
             },
@@ -469,7 +469,7 @@ Object {
           "id": "myTransactionId2",
           "offset": 39298,
           "parent": Object {
-            "custom": Object {
+            "doc": Object {
               "parent": Object {
                 "id": "myTransactionId1",
               },
@@ -501,7 +501,7 @@ Object {
             "id": "mySpanIdD",
             "offset": 1754,
             "parent": Object {
-              "custom": Object {
+              "doc": Object {
                 "processor": Object {
                   "event": "transaction",
                 },
@@ -543,7 +543,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdA",
         },
@@ -575,7 +575,7 @@ Object {
       "id": "mySpanIdC",
       "offset": 43899,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "myTransactionId2",
           },
@@ -607,7 +607,7 @@ Object {
         "id": "mySpanIdA",
         "offset": 40498,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "parent": Object {
               "id": "mySpanIdD",
             },
@@ -643,7 +643,7 @@ Object {
           "id": "myTransactionId2",
           "offset": 39298,
           "parent": Object {
-            "custom": Object {
+            "doc": Object {
               "parent": Object {
                 "id": "myTransactionId1",
               },
@@ -675,7 +675,7 @@ Object {
             "id": "mySpanIdD",
             "offset": 1754,
             "parent": Object {
-              "custom": Object {
+              "doc": Object {
                 "processor": Object {
                   "event": "transaction",
                 },
@@ -717,7 +717,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "agent": Object {
           "name": "ruby",
           "version": "2",
@@ -753,7 +753,7 @@ Object {
       "id": "error1",
       "offset": 25994,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "processor": Object {
             "event": "transaction",
           },
@@ -783,7 +783,6 @@ Object {
         "skew": 0,
       },
       "parentId": "myTransactionId1",
-      "serviceColor": "#00b3a4",
       "skew": 0,
     },
   ],
@@ -856,7 +855,7 @@ Object {
   },
   "items": Array [
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdD",
         },
@@ -896,7 +895,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "myTransactionId2",
         },
@@ -928,7 +927,7 @@ Object {
       "id": "mySpanIdA",
       "offset": 1200,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "mySpanIdD",
           },
@@ -971,7 +970,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdA",
         },
@@ -1003,7 +1002,7 @@ Object {
       "id": "mySpanIdB",
       "offset": 2329,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "myTransactionId2",
           },
@@ -1035,7 +1034,7 @@ Object {
         "id": "mySpanIdA",
         "offset": 1200,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "parent": Object {
               "id": "mySpanIdD",
             },
@@ -1081,7 +1080,7 @@ Object {
       "skew": 0,
     },
     Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "mySpanIdA",
         },
@@ -1113,7 +1112,7 @@ Object {
       "id": "mySpanIdC",
       "offset": 4601,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "myTransactionId2",
           },
@@ -1145,7 +1144,7 @@ Object {
         "id": "mySpanIdA",
         "offset": 1200,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "parent": Object {
               "id": "mySpanIdD",
             },
@@ -1221,7 +1220,7 @@ Object {
 exports[`waterfall_helpers getWaterfallItems should handle cyclic references 1`] = `
 Array [
   Object {
-    "custom": Object {
+    "doc": Object {
       "timestamp": Object {
         "us": 10,
       },
@@ -1236,7 +1235,7 @@ Array [
     "skew": 0,
   },
   Object {
-    "custom": Object {
+    "doc": Object {
       "parent": Object {
         "id": "a",
       },
@@ -1251,7 +1250,7 @@ Array [
     "id": "b",
     "offset": 10,
     "parent": Object {
-      "custom": Object {
+      "doc": Object {
         "timestamp": Object {
           "us": 10,
         },
@@ -1274,7 +1273,7 @@ Array [
 exports[`waterfall_helpers getWaterfallItems should order items correctly 1`] = `
 Array [
   Object {
-    "custom": Object {
+    "doc": Object {
       "service": Object {
         "name": "opbeans-java",
       },
@@ -1294,53 +1293,7 @@ Array [
     "skew": 0,
   },
   Object {
-    "custom": Object {
-      "parent": Object {
-        "id": "a",
-      },
-      "service": Object {
-        "name": "opbeans-java",
-      },
-      "span": Object {
-        "id": "b2",
-        "name": "GET [0:0:0:0:0:0:0:1]",
-      },
-      "timestamp": Object {
-        "us": 1536763736367000,
-      },
-      "transaction": Object {
-        "id": "a",
-      },
-    },
-    "docType": "span",
-    "duration": 4694,
-    "id": "b2",
-    "offset": 1000,
-    "parent": Object {
-      "custom": Object {
-        "service": Object {
-          "name": "opbeans-java",
-        },
-        "timestamp": Object {
-          "us": 1536763736366000,
-        },
-        "transaction": Object {
-          "id": "a",
-          "name": "APIRestController#products",
-        },
-      },
-      "docType": "transaction",
-      "duration": 9480,
-      "id": "a",
-      "offset": 0,
-      "parent": undefined,
-      "skew": 0,
-    },
-    "parentId": "a",
-    "skew": 0,
-  },
-  Object {
-    "custom": Object {
+    "doc": Object {
       "parent": Object {
         "id": "a",
       },
@@ -1363,7 +1316,7 @@ Array [
     "id": "b",
     "offset": 2000,
     "parent": Object {
-      "custom": Object {
+      "doc": Object {
         "service": Object {
           "name": "opbeans-java",
         },
@@ -1386,7 +1339,7 @@ Array [
     "skew": 0,
   },
   Object {
-    "custom": Object {
+    "doc": Object {
       "parent": Object {
         "id": "b",
       },
@@ -1406,7 +1359,7 @@ Array [
     "id": "c",
     "offset": 3000,
     "parent": Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "a",
         },
@@ -1429,7 +1382,7 @@ Array [
       "id": "b",
       "offset": 2000,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "service": Object {
             "name": "opbeans-java",
           },
@@ -1455,7 +1408,7 @@ Array [
     "skew": 0,
   },
   Object {
-    "custom": Object {
+    "doc": Object {
       "parent": Object {
         "id": "c",
       },
@@ -1478,7 +1431,7 @@ Array [
     "id": "d",
     "offset": 5000,
     "parent": Object {
-      "custom": Object {
+      "doc": Object {
         "parent": Object {
           "id": "b",
         },
@@ -1498,7 +1451,7 @@ Array [
       "id": "c",
       "offset": 3000,
       "parent": Object {
-        "custom": Object {
+        "doc": Object {
           "parent": Object {
             "id": "a",
           },
@@ -1521,7 +1474,7 @@ Array [
         "id": "b",
         "offset": 2000,
         "parent": Object {
-          "custom": Object {
+          "doc": Object {
             "service": Object {
               "name": "opbeans-java",
             },
@@ -1549,5 +1502,51 @@ Array [
     "parentId": "c",
     "skew": 0,
   },
+  Object {
+    "doc": Object {
+      "parent": Object {
+        "id": "a",
+      },
+      "service": Object {
+        "name": "opbeans-java",
+      },
+      "span": Object {
+        "id": "b2",
+        "name": "GET [0:0:0:0:0:0:0:1]",
+      },
+      "timestamp": Object {
+        "us": 1536763736367000,
+      },
+      "transaction": Object {
+        "id": "a",
+      },
+    },
+    "docType": "span",
+    "duration": 4694,
+    "id": "b2",
+    "offset": 1000,
+    "parent": Object {
+      "doc": Object {
+        "service": Object {
+          "name": "opbeans-java",
+        },
+        "timestamp": Object {
+          "us": 1536763736366000,
+        },
+        "transaction": Object {
+          "id": "a",
+          "name": "APIRestController#products",
+        },
+      },
+      "docType": "transaction",
+      "duration": 9480,
+      "id": "a",
+      "offset": 0,
+      "parent": undefined,
+      "skew": 0,
+    },
+    "parentId": "a",
+    "skew": 0,
+  },
 ]
 `;
diff --git a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
index 2b6af0e709f08..da4be88dea499 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
@@ -42,8 +42,6 @@ interface IWaterfallItemBase<T, U> {
   docType: U;
   doc: T;
 
-  serviceColor?: string;
-
   id: string;
 
   parent?: IWaterfallItem;
@@ -101,10 +99,7 @@ function getSpanItem(span: Span): IWaterfallSpan {
   };
 }
 
-function getErrorItem(
-  error: APMError,
-  serviceColors: IServiceColors
-): IWaterfallError {
+function getErrorItem(error: APMError): IWaterfallError {
   return {
     docType: 'error',
     doc: error,
@@ -112,8 +107,7 @@ function getErrorItem(
     parentId: error.parent?.id,
     offset: 0,
     skew: 0,
-    duration: 0,
-    serviceColor: serviceColors[error.service.name]
+    duration: 0
   };
 }
 
@@ -194,8 +188,8 @@ function getRootTransaction(childrenByParentId: IWaterfallGroup) {
 
 export type IServiceColors = Record<string, string>;
 
-function getServiceColors(traceItems: TraceAPIResponse['trace']['items']) {
-  const services = uniq(traceItems.map(item => item.service.name));
+function getServiceColors(waterfallItems: IWaterfallItem[]) {
+  const services = uniq(waterfallItems.map(item => item.doc.service.name));
 
   const assignedColors = [
     theme.euiColorVis1,
@@ -216,10 +210,7 @@ const getWaterfallDuration = (waterfallItems: IWaterfallItem[]) =>
     0
   );
 
-const getWaterfallItems = (
-  items: TraceAPIResponse['trace']['items'],
-  serviceColors: IServiceColors
-) =>
+const getWaterfallItems = (items: TraceAPIResponse['trace']['items']) =>
   items.map(item => {
     const docType = item.processor.event;
     switch (docType) {
@@ -228,7 +219,7 @@ const getWaterfallItems = (
       case 'transaction':
         return getTransactionItem(item as Transaction);
       case 'error':
-        return getErrorItem(item as APMError, serviceColors);
+        return getErrorItem(item as APMError);
     }
   });
 
@@ -257,12 +248,7 @@ export function getWaterfall(
     };
   }
 
-  const serviceColors = getServiceColors(trace.items);
-
-  const waterfallItems: IWaterfallItem[] = getWaterfallItems(
-    trace.items,
-    serviceColors
-  );
+  const waterfallItems: IWaterfallItem[] = getWaterfallItems(trace.items);
 
   const childrenByParentId = getChildrenGroupedByParentId(waterfallItems);
 
@@ -278,6 +264,7 @@ export function getWaterfall(
 
   const rootTransaction = getRootTransaction(childrenByParentId);
   const duration = getWaterfallDuration(items);
+  const serviceColors = getServiceColors(items);
 
   const entryTransaction = entryWaterfallTransaction?.doc;