From e83cb582a77cc79355c3d610387f6d0b3e8e274d Mon Sep 17 00:00:00 2001
From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com>
Date: Sun, 15 Feb 2026 21:50:43 -0500
Subject: [PATCH] Fix pie chart highlight by directly dimming non-hovered
 slices

Replace toggleDataPointSelection with direct SVG opacity manipulation
for reliable visual feedback when hovering legend or table rows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/views/reports/ReportsView.vue | 33 ++++++++++++----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/views/reports/ReportsView.vue b/frontend/src/views/reports/ReportsView.vue
index 68cdb06..4c53f78 100644
--- a/frontend/src/views/reports/ReportsView.vue
+++ b/frontend/src/views/reports/ReportsView.vue
@@ -290,7 +290,6 @@ const snackbarText = ref('')
 
 const spendingChartRef = ref()
 const highlightedCategory = ref<string | null>(null)
-let selectedChartIndex = -1
 
 const spending = ref<SpendingByCategoryReport | null>(null)
 const incomeExpense = ref<IncomeVsExpenseReport | null>(null)
@@ -378,6 +377,11 @@ const spendingChartOptions = computed(() => ({
   colors: chartColors,
   labels: spending.value?.categories.map(c => c.categoryName) ?? [],
   legend: { show: false },
+  states: {
+    active: { filter: { type: 'none' } },
+    hover: { filter: { type: 'darken', value: 0.65 } },
+  },
+  plotOptions: { pie: { expandOnClick: false } },
   dataLabels: { style: { colors: ['#FFFFFF'] }, dropShadow: { enabled: true, top: 1, left: 1, blur: 2, opacity: 0.5 } },
   tooltip: {
     y: {
@@ -388,27 +392,26 @@ const spendingChartOptions = computed(() => ({
 
 function highlightCategory(categoryName: string) {
   highlightedCategory.value = categoryName
-  const chart = spendingChartRef.value?.chart
-  if (!chart) return
+  const chartEl = spendingChartRef.value?.$el as HTMLElement | undefined
+  if (!chartEl) return
   const labels = spending.value?.categories.map(c => c.categoryName) ?? []
   const idx = labels.indexOf(categoryName)
   if (idx === -1) return
-  if (selectedChartIndex >= 0 && selectedChartIndex !== idx) {
-    chart.toggleDataPointSelection(0, selectedChartIndex)
-  }
-  if (selectedChartIndex !== idx) {
-    chart.toggleDataPointSelection(0, idx)
-    selectedChartIndex = idx
-  }
+  // Reset all slices then highlight the target
+  const paths = chartEl.querySelectorAll('.apexcharts-pie-area')
+  paths.forEach((p, i) => {
+    (p as HTMLElement).style.opacity = i === idx ? '1' : '0.35'
+  })
 }
 
 function unhighlightCategory() {
   highlightedCategory.value = null
-  const chart = spendingChartRef.value?.chart
-  if (chart && selectedChartIndex >= 0) {
-    chart.toggleDataPointSelection(0, selectedChartIndex)
-    selectedChartIndex = -1
-  }
+  const chartEl = spendingChartRef.value?.$el as HTMLElement | undefined
+  if (!chartEl) return
+  const paths = chartEl.querySelectorAll('.apexcharts-pie-area')
+  paths.forEach(p => {
+    (p as HTMLElement).style.opacity = '1'
+  })
 }
 
 const spendingRowProps = ({ item }: any) => ({