From 94049c08a8f8574b9d013881abc98ba3698d2251 Mon Sep 17 00:00:00 2001 From: Catherine Renelle <32781029+catrenelle@users.noreply.github.com> Date: Sun, 15 Feb 2026 19:57:54 -0500 Subject: [PATCH] Highlight table row when hovering spending chart legend items Add legendMouseOver/legendMouseOut events to sync legend hover with the category table highlighting. Co-Authored-By: Claude Opus 4.6 --- frontend/src/views/reports/ReportsView.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/views/reports/ReportsView.vue b/frontend/src/views/reports/ReportsView.vue index 6674c3a..8beee11 100644 --- a/frontend/src/views/reports/ReportsView.vue +++ b/frontend/src/views/reports/ReportsView.vue @@ -347,6 +347,13 @@ const spendingChartOptions = computed(() => ({ dataPointMouseLeave: () => { highlightedCategory.value = null }, + legendMouseOver: (_ctx: any, _opts: any, config: any) => { + const labels = spending.value?.categories.map(c => c.categoryName) ?? [] + highlightedCategory.value = labels[config.seriesIndex] ?? null + }, + legendMouseOut: () => { + highlightedCategory.value = null + }, }, }, labels: spending.value?.categories.map(c => c.categoryName) ?? [],