diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index 7e1f781b..30b42031 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -167,11 +167,17 @@ export default {
                             percent = params.percent + '%';
                         }
 
+                        let tooltip = `<div><span class="chart-pointer" style="background-color: ${params.color}"></span>`;
+
                         if (name) {
-                            return `${name}<br/>${value} (${percent})`;
+                            tooltip += `<span>${name}</span><br/><span>${value} (${percent})</span>`;
                         } else {
-                            return `${value} (${percent})`;
+                            tooltip += `<span>${value} (${percent})</span>`;
                         }
+
+                        tooltip += '</div>';
+
+                        return tooltip;
                     }
                 },
                 legend: {
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index 18cc7236..6017f72e 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -124,6 +124,14 @@ input[type=number] {
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
 }
 
+.chart-pointer {
+    display: inline-block;
+    margin-right: 5px;
+    border-radius: 10px;
+    width: 10px;
+    height: 10px;
+}
+
 /** Common class for replacing the default style of vuetify **/
 .v-input.v-input--readonly input,
 .v-input.v-input--readonly textarea,