From 8a5b26cefeafaf0096155ce89ab6f25e82d1fc5c Mon Sep 17 00:00:00 2001
From: volodfast <volodfast@gmail.com>
Date: Tue, 7 Feb 2023 13:25:33 +0200
Subject: [PATCH] feat: highlight nearest in chart on hover (#2184)

Co-authored-by: palashgdev <palashgdev@gmail.com>
---
 frontend/src/components/Graph/index.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx
index 75b6ace88963..20ffc5a22cf5 100644
--- a/frontend/src/components/Graph/index.tsx
+++ b/frontend/src/components/Graph/index.tsx
@@ -81,6 +81,7 @@ function Graph({
 	onDragSelect,
 	dragSelectColor,
 }: GraphProps): JSX.Element {
+	const nearestDatasetIndex = useRef<null | number>(null);
 	const chartRef = useRef<HTMLCanvasElement>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -164,8 +165,16 @@ function Graph({
 								if (context.parsed.y !== null) {
 									label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
 								}
+
 								return label;
 							},
+							labelTextColor(labelData) {
+								if (labelData.datasetIndex === nearestDatasetIndex.current) {
+									return 'rgba(255, 255, 255, 1)';
+								}
+
+								return 'rgba(255, 255, 255, 0.75)';
+							},
 						},
 					},
 					[dragSelectPluginId]: createDragSelectPluginOptions(
@@ -237,6 +246,22 @@ function Graph({
 						onClickHandler(event, element, chart, data);
 					}
 				},
+				onHover: (event, _, chart) => {
+					if (event.native) {
+						const interactions = chart.getElementsAtEventForMode(
+							event.native,
+							'nearest',
+							{
+								intersect: false,
+							},
+							true,
+						);
+
+						if (interactions[0]) {
+							nearestDatasetIndex.current = interactions[0].datasetIndex;
+						}
+					}
+				},
 			};
 
 			const chartHasData = hasData(data);