diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
index 989643cfbd..d4d2df7044 100644
--- a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
@@ -143,15 +143,21 @@ describe('GraphHelpers', () => {
         getOptions(true, false).tooltip.content('', 1572128592, 1572128592, {
           series: { labels: { foo: '1', bar: '2' }, color: '' },
         } as any)
-      ).toEqual(`
+      ).toEqual(
+        `
             <div class="date">1970-01-19 04:42:08 +00:00</div>
             <div>
               <span class="detail-swatch" style="background-color: "></span>
               <span>value: <strong>1572128592</strong></span>
-            <div>
-            <div class="labels mt-1">
+            </div>
+            <div class="mt-2 mb-1 font-weight-bold">Series:</div>
+            
+            <div class="labels">
+              
+              
               <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
-            </div>`);
+            </div>`
+      );
     });
     it('should return proper tooltip html from options with local time', () => {
       moment.tz.setDefault('America/New_York');
@@ -164,8 +170,12 @@ describe('GraphHelpers', () => {
             <div>
               <span class="detail-swatch" style="background-color: "></span>
               <span>value: <strong>1572128592</strong></span>
-            <div>
-            <div class="labels mt-1">
+            </div>
+            <div class="mt-2 mb-1 font-weight-bold">Series:</div>
+            
+            <div class="labels">
+              
+              
               <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
             </div>`);
     });
@@ -179,13 +189,19 @@ describe('GraphHelpers', () => {
             <div>
               <span class="detail-swatch" style="background-color: "></span>
               <span>value: <strong>1572128592</strong></span>
-            <div>
-            <div class="labels mt-1">
+            </div>
+            <div class="mt-2 mb-1 font-weight-bold">Trace exemplar:</div>
+            
+            <div class="labels">
+              
+              
               <div class="mb-1"><strong>foo</strong>: 1</div><div class="mb-1"><strong>bar</strong>: 2</div>
             </div>
             
-            <span>Series labels:</span>
-            <div class="labels mt-1">
+            <div class="mt-2 mb-1 font-weight-bold">Associated series:</div>
+            <div class="labels">
+              
+              
               <div class="mb-1"><strong>foo</strong>: 2</div><div class="mb-1"><strong>bar</strong>: 3</div>
             </div>`);
     });
diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.ts
index 4d09010953..08f630ac42 100644
--- a/web/ui/react-app/src/pages/graph/GraphHelpers.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHelpers.ts
@@ -107,33 +107,30 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
         if (!useLocalTime) {
           dateTime = dateTime.utc();
         }
+
+        const formatLabels = (labels: { [key: string]: string }): string => `
+            <div class="labels">
+              ${Object.keys(labels).length === 0 ? '<div class="mb-1 font-italic">no labels</div>' : ''}
+              ${labels['__name__'] ? `<div class="mb-1"><strong>${labels['__name__']}</strong></div>` : ''}
+              ${Object.keys(labels)
+                .filter(k => k !== '__name__')
+                .map(k => `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(labels[k])}</div>`)
+                .join('')}
+            </div>`;
+
         return `
             <div class="date">${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}</div>
             <div>
               <span class="detail-swatch" style="background-color: ${color}"></span>
               <span>${labels.__name__ || 'value'}: <strong>${yval}</strong></span>
-            <div>
-            <div class="labels mt-1">
-              ${Object.keys(labels)
-                .map(k =>
-                  k !== '__name__' ? `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(labels[k])}</div>` : ''
-                )
-                .join('')}
             </div>
+            <div class="mt-2 mb-1 font-weight-bold">${'seriesLabels' in both ? 'Trace exemplar:' : 'Series:'}</div>
+            ${formatLabels(labels)}
             ${
               'seriesLabels' in both
                 ? `
-            <span>Series labels:</span>
-            <div class="labels mt-1">
-              ${Object.keys(both.seriesLabels)
-                .map(k =>
-                  k !== '__name__'
-                    ? `<div class="mb-1"><strong>${k}</strong>: ${escapeHTML(both.seriesLabels[k])}</div>`
-                    : ''
-                )
-                .join('')}
-            </div>
-            `
+            <div class="mt-2 mb-1 font-weight-bold">Associated series:</div>${formatLabels(both.seriesLabels)}
+`
                 : ''
             }
           `.trimEnd();