highlight line on legend hover

public/elotracker/chart-integration.js

@@ -40,6 +40,48 @@ const zoom_plugin = {
 		mode: "x",
 	},
 }
+const trigger_legend_hover = function (e, legendItem, legend) {
+	if (legendItem.hidden) {
+		return;
+	}
+	legend.chart.data.datasets.forEach((dataset, i) => {
+		dataset.backgroundColor = (legendItem.datasetIndex === i || dataset.backgroundColor.length === 9) ? dataset.backgroundColor : dataset.backgroundColor + '3D';
+		dataset.borderColor = (legendItem.datasetIndex === i || dataset.borderColor.length === 9) ? dataset.borderColor : dataset.borderColor + '3D';
+		dataset.borderWidth = legendItem.datasetIndex === i ? 4 : 3;
+		dataset.pointRadius = 2;
+	});
+	legend.chart.update();
+}
+const trigger_legend_leave = function (e, legendItem, legend) {
+	legend.chart.data.datasets.forEach((dataset, i) => {
+		dataset.backgroundColor = dataset.backgroundColor.length === 9 ? dataset.backgroundColor.slice(0, -2) : dataset.backgroundColor;
+		dataset.borderColor = dataset.borderColor.length === 9 ? dataset.borderColor.slice(0, -2) : dataset.borderColor;
+		dataset.borderWidth =  3;
+	});
+	legend.chart.update();
+}
+const legend_plugin = {
+	position: "bottom",
+	labels: {
+		padding: 10,
+		useBorderRadius: true,
+		borderRadius: 2,
+		boxWidth: 20,
+	},
+	onHover: trigger_legend_hover,
+	onLeave: trigger_legend_leave,
+	onClick: function (e, legendItem, legend) {
+		if (legend.chart.isDatasetVisible(legendItem.datasetIndex)) {
+			trigger_legend_leave(e, legendItem, legend);
+			legend.chart.hide(legendItem.datasetIndex);
+			legendItem.hidden = true;
+		} else {
+			legend.chart.show(legendItem.datasetIndex);
+			legendItem.hidden = false;
+			trigger_legend_hover(e, legendItem, legend);
+		}
+	}
+}
 
 window.onload = create_charts;
 
@@ -95,6 +137,7 @@ async function create_charts() {
 					backgroundColor: getColor(color_counter),
 					data: player_rank_values[puuid],
 					spanGaps: true,
+					pointHitRadius: 16,
 				})
 				all_progress_yDatasets.push({
 					label: `${player_accounts[puuid]["gameName"]}#${player_accounts[puuid]["tagLine"]}`,
@@ -103,6 +146,7 @@ async function create_charts() {
 					backgroundColor: getColor(color_counter),
 					data: player_progress_values[puuid],
 					spanGaps: true,
+					pointHitRadius: 16,
 				})
 				color_counter++;
 			}
@@ -125,6 +169,7 @@ async function create_charts() {
 							}
 						},
 						zoom: zoom_plugin,
+						legend: legend_plugin,
 					},
 					scales: {
 						x: x_scale,
@@ -160,6 +205,7 @@ async function create_charts() {
 							}
 						},
 						zoom: zoom_plugin,
+						legend: legend_plugin,
 					},
 					scales: {
 						x: x_scale,
@@ -192,7 +238,8 @@ async function create_charts() {
 					fill: false,
 					borderColor: "rgba(150,150,175)",
 					backgroundColor: "rgba(150,150,175)",
-					data: values
+					data: values,
+					pointHitRadius: 16,
 				}]
 			},
 			options: {