diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index b5c5c65bbf49..896eb8125853 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -28,6 +28,7 @@ export default {
   },
   data: () => ({
     colorRange: [
+      'var(--color-secondary-alpha-70)',
       'var(--color-secondary-alpha-70)',
       'var(--color-primary-light-4)',
       'var(--color-primary-light-2)',
@@ -50,6 +51,12 @@ export default {
       return s;
     }
   },
+  mounted() {
+    // work around issue with first legend color being rendered twice and legend cut off
+    const legend = document.querySelector('.vch__external-legend-wrapper');
+    legend.setAttribute('viewBox', '12 0 80 10');
+    legend.style.marginRight = '-12px';
+  },
   methods: {
     handleDayClick(e) {
       // Reset filter if same date is clicked