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 <noreply@anthropic.com>
This commit is contained in:
@@ -347,6 +347,13 @@ const spendingChartOptions = computed(() => ({
|
|||||||
dataPointMouseLeave: () => {
|
dataPointMouseLeave: () => {
|
||||||
highlightedCategory.value = null
|
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) ?? [],
|
labels: spending.value?.categories.map(c => c.categoryName) ?? [],
|
||||||
|
|||||||
Reference in New Issue
Block a user