diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue
index 7b93cad78..9f7a82350 100644
--- a/dashboard/src/components/GraphItem.vue
+++ b/dashboard/src/components/GraphItem.vue
@@ -44,20 +44,20 @@ function renderTooltip(context) {
   const { title, body, labelColors, dataPoints } = tooltip; // these were computed in the "callback" in tooltip configuration
   if (body) {
     const titleLines = title || [];
-    const bodyLines = body.map(item => item.lines);
+    const bodyLines = body.map(item => { return { label: item.lines }; });
 
     let innerHtml = `<div class="graphs-tooltip-title">${titleLines[0]}</div>`;
 
     // first amend the value so we know the dataPoints index, then sort and render
     bodyLines.forEach((body, i) => {
       body.value = dataPoints[i].parsed?.y || 0;
+      body.color = labelColors[i].borderColor;
     });
     bodyLines.sort((a, b) => {
       return b.value - a.value;
     });
-    bodyLines.slice(0, 5).forEach((body, i) => {
-      const colors = labelColors[i];
-      innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</div>`;
+    bodyLines.slice(0, 5).forEach(body => {
+      innerHtml += `<div style="color: ${body.color}" class="graphs-tooltip-item">${body.label}</div>`;
     });
 
     if (bodyLines.length > 5) innerHtml += '<div>...</div>';