diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 9167a33060..9f3cdc332b 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -5,6 +5,7 @@ import {
   VueUiScatter,
   type VueUiScatterConfig,
   type VueUiScatterDatasetItem,
+  type VueUiScatterSeries,
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
@@ -285,6 +286,11 @@ function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
 
+function toggleLegendItem(legendItem: VueUiScatterSeries) {
+  legendItem.segregate()
+  legendItem.onEnter()
+}
+
 const readyTeleport = shallowRef(false)
 
 onMounted(async () => {
@@ -389,26 +395,26 @@ onMounted(async () => {
                       : 'text-sm leading-6'
                   "
                 >
-                  <li v-for="datapoint in legend" :key="datapoint.name">
+                  <li v-for="legendItem in legend" :key="legendItem.id">
                     <button
-                      :aria-pressed="datapoint.isSegregated"
-                      :aria-label="datapoint.name"
+                      :aria-pressed="legendItem.isSegregated"
+                      :aria-label="legendItem.name"
                       type="button"
                       class="flex gap-1.5 place-items-center"
-                      @click="datapoint.segregate()"
+                      :class="legendItem.isSegregated ? 'line-through' : 'hover:underline'"
+                      @click="toggleLegendItem(legendItem)"
+                      @mouseenter="legendItem.onEnter()"
+                      @mouseleave="legendItem.onLeave()"
+                      @focus="legendItem.onEnter()"
+                      @blur="legendItem.onLeave()"
                     >
                       <div class="h-3 w-3" aria-hidden="true">
                         <svg viewBox="0 0 2 2" class="w-full">
-                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                          <circle cx="1" cy="1" r="1" :fill="legendItem.color" />
                         </svg>
                       </div>
-                      <span
-                        class="text-fg"
-                        :style="{
-                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                        }"
-                      >
-                        {{ datapoint.name }}
+                      <span class="text-fg">
+                        {{ legendItem.name }}
                       </span>
                     </button>
                   </li>
@@ -559,14 +565,35 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+:deep(.vue-data-ui-component) {
+  --super-ease-out: cubic-bezier(0.15, 0.75, 0.35, 1);
+}
+
 :deep(.vue-data-ui-component svg:focus-visible) {
   outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
+
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
   outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
+
+:deep(.vue-ui-scatter-scale-group),
+:deep(.vue-ui-scatter-datapoint text),
+:deep(.vue-ui-scatter-datapoint circle),
+:deep(.vue-ui-scatter-datapoint-label) {
+  transition: all 0.5s var(--super-ease-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :deep(.vue-ui-scatter-scale-group),
+  :deep(.vue-ui-scatter-datapoint text),
+  :deep(.vue-ui-scatter-datapoint circle),
+  :deep(.vue-ui-scatter-datapoint-label) {
+    transition: none !important;
+  }
+}
 </style>
diff --git a/package.json b/package.json
index 575287b1a8..27ed81df86 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.16",
     "vue": "3.5.33",
-    "vue-data-ui": "3.18.0",
+    "vue-data-ui": "3.18.2",
     "vue-router": "5.0.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c784735fe7..ce31753f13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,8 +249,8 @@ importers:
         specifier: 3.5.33
         version: 3.5.33(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.18.0
-        version: 3.18.0(vue@3.5.33)
+        specifier: 3.18.2
+        version: 3.18.2(vue@3.5.33)
       vue-router:
         specifier: 5.0.4
         version: 5.0.4(@vue/compiler-sfc@3.5.33)(vue@3.5.33)
@@ -11129,8 +11129,8 @@ packages:
   vue-component-type-helpers@3.2.7:
     resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
 
-  vue-data-ui@3.18.0:
-    resolution: {integrity: sha512-sPCYLVEMC4sVe7kf3qEf5VkIkkflCg95/jsMdveR8r3C6d6fga/50lRPd3wK14wFI1Mkt3cd4X3r3x3wgONLww==}
+  vue-data-ui@3.18.2:
+    resolution: {integrity: sha512-BJP+YMrJeAdVnT2rmBsZBe+rHksReCHrzFM8MYXAgndgAdPJlzsLigylwflLhm9sndQeAt6ihCslX0VIU+nyUQ==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23836,7 +23836,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.7: {}
 
-  vue-data-ui@3.18.0(vue@3.5.33):
+  vue-data-ui@3.18.2(vue@3.5.33):
     dependencies:
       vue: 3.5.33(typescript@6.0.2)