diff --git a/app/components/Package/DownloadAnalytics.vue b/app/components/Package/DownloadAnalytics.vue
index 8823b6a0e..4b3fd02f4 100644
--- a/app/components/Package/DownloadAnalytics.vue
+++ b/app/components/Package/DownloadAnalytics.vue
@@ -174,6 +174,7 @@ function formatXyDataset(
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
+          useArea: true,
         },
       ],
       dates: dataset.map(d => d.timestampEnd),
@@ -187,6 +188,7 @@ function formatXyDataset(
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
+          useArea: true,
         },
       ],
       dates: dataset.map(d => d.timestamp),
@@ -200,6 +202,7 @@ function formatXyDataset(
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
+          useArea: true,
         },
       ],
       dates: dataset.map(d => d.timestamp),
@@ -213,6 +216,7 @@ function formatXyDataset(
           type: 'line',
           series: dataset.map(d => d.downloads),
           color: accent.value,
+          useArea: true,
         },
       ],
       dates: dataset.map(d => d.timestamp),
@@ -1044,6 +1048,14 @@ const chartConfig = computed(() => {
       <ClientOnly v-if="chartData.dataset">
         <div>
           <VueUiXy :dataset="chartData.dataset" :config="chartConfig" class="[direction:ltr]">
+            <!-- Subtle gradient applied for a unique series (chart modal) -->
+            <template #area-gradient="{ series: chartModalSeries, id: gradientId }">
+              <linearGradient :id="gradientId" x1="0" x2="0" y1="0" y2="1">
+                <stop offset="0%" :stop-color="chartModalSeries.color" stop-opacity="0.2" />
+                <stop offset="100%" :stop-color="colors.bg" stop-opacity="0" />
+              </linearGradient>
+            </template>
+
             <!-- Custom legend for multiple series -->
             <template v-if="isMultiPackageMode" #legend="{ legend }">
               <div class="flex gap-4 flex-wrap justify-center">
diff --git a/package.json b/package.json
index 9ddbc5614..6aa01b94c 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab",
     "vue": "3.5.27",
-    "vue-data-ui": "3.14.7"
+    "vue-data-ui": "3.14.8"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 372568565..7b1b5fbac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,8 +201,8 @@ importers:
         specifier: 3.5.27
         version: 3.5.27(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.14.7
-        version: 3.14.7(vue@3.5.27(typescript@5.9.3))
+        specifier: 3.14.8
+        version: 3.14.8(vue@3.5.27(typescript@5.9.3))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.1.4
@@ -9328,8 +9328,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-data-ui@3.14.7:
-    resolution: {integrity: sha512-aA7jNLyqBPGDvxRSJYI+xCnYhjdJgP2csvGCNNmsjJiI+N7yc8YmgcYR34BcVH7BTyO+kbt1xQ7zZry0H0SiMA==}
+  vue-data-ui@3.14.8:
+    resolution: {integrity: sha512-nF6klDiXVzL/zs/ENCR+lR/Xan5UvTR+Va6pUCQqgY7v8apID48xmt6KDjBWGSx0hGWd5rB1u2kNXjDexHteKA==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -20806,7 +20806,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-data-ui@3.14.7(vue@3.5.27(typescript@5.9.3)):
+  vue-data-ui@3.14.8(vue@3.5.27(typescript@5.9.3)):
     dependencies:
       vue: 3.5.27(typescript@5.9.3)