diff --git a/resources/js/Components/Dashboard/ActivityGraphCard.vue b/resources/js/Components/Dashboard/ActivityGraphCard.vue
index fbe50dea..302ba43c 100644
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -106,15 +106,17 @@ const option = computed(() => {
     return {
         tooltip: {},
         visualMap: {
-            min: 0,
-            max: max.value,
             type: 'piecewise',
             orient: 'horizontal',
             left: 'center',
             top: 'center',
-            inRange: {
-                color: [chartEmptyColor.value, chartColor.value],
-            },
+            pieces: [
+                { value: 0, color: chartEmptyColor.value },
+                { gt: 0, lte: max.value * 0.25, color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.4).hex() },
+                { gt: max.value * 0.25, lte: max.value * 0.5, color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.6).hex() },
+                { gt: max.value * 0.5, lte: max.value * 0.75, color: chroma.mix(chartEmptyColor.value, chartColor.value, 0.8).hex() },
+                { gt: max.value * 0.75, lte: max.value, color: chartColor.value },
+            ],
             show: false,
         },
         calendar: {