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

@@ -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
+  const chartEl = spendingChartRef.value?.$el as HTMLElement | undefined
-  if (!chart) return
+  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) {
+  // Reset all slices then highlight the target
-    chart.toggleDataPointSelection(0, selectedChartIndex)
+  const paths = chartEl.querySelectorAll('.apexcharts-pie-area')
-  }
+  paths.forEach((p, i) => {
-  if (selectedChartIndex !== idx) {
+    (p as HTMLElement).style.opacity = i === idx ? '1' : '0.35'
-    chart.toggleDataPointSelection(0, idx)
+  })
-    selectedChartIndex = idx
-  }
 }
 
 function unhighlightCategory() {
   highlightedCategory.value = null
-  const chart = spendingChartRef.value?.chart
+  const chartEl = spendingChartRef.value?.$el as HTMLElement | undefined
-  if (chart && selectedChartIndex >= 0) {
+  if (!chartEl) return
-    chart.toggleDataPointSelection(0, selectedChartIndex)
+  const paths = chartEl.querySelectorAll('.apexcharts-pie-area')
-    selectedChartIndex = -1
+  paths.forEach(p => {
-  }
+    (p as HTMLElement).style.opacity = '1'
+  })
 }
 
 const spendingRowProps = ({ item }: any) => ({