feat: highlight nearest in chart on hover (#2184)

Co-authored-by: palashgdev <palashgdev@gmail.com>

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);