如何在Chart JS中悬停当前刻度线？

Question

我正在基于Chart JS制作图表，并且当用户将鼠标悬停在与该刻度相关的点时，需要突出显示xAxis刻度。我找到了一种解决方案，该方法如何突出显示当前点后面的网格线，但不知道如何仅使一个刻度线加粗。

在该代码段中，您可以找到带有网格线悬停的默认代码。

Chart.defaults.superLine = Chart.defaults.line;
		Chart.controllers.superLine = Chart.controllers.line.extend({
			draw(ease) {
				Chart.controllers.line.prototype.draw.call(this, ease);

				if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
					const activePoint = this.chart.tooltip._active[0];
					const ctx = this.chart.ctx;
					const x = activePoint.tooltipPosition().x;
					const topY = this.chart.scales['y-axis-0'].top;
					const bottomY = this.chart.scales['y-axis-0'].bottom;

					const activeIndex = this.chart.tooltip._active[0]._index;
					const currentTick = this.chart.boxes[2].ticks[activeIndex];

					ctx.save();
					ctx.globalCompositeOperation='destination-over';
					ctx.beginPath();
					ctx.moveTo(x, topY);
					ctx.lineTo(x, bottomY);
					ctx.lineWidth = 1;
					ctx.strokeStyle = '#7B7B7B';
					ctx.closePath();
					ctx.stroke();
					ctx.restore();
				}
			}
		});

const data = {
			labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
			datasets: [{
				type: 'superLine',
				data: [12, 19, 3, 5, 2, 3],
				fill: false,

				borderColor: "rgba(0, 0, 0, .1)",
				borderSkipped: false,
				borderWidth: {left: 0, right: 0, top: 0, bottom: 8},

				backgroundColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
    ],
			}]
		};


		const options = {
			legend: {
				display: false
			},
			maintainAspectRatio: false,
			tooltips: {
				enabled: false,
				mode: 'index',
				intersect: false,
				position: 'nearest',
			},
			responsive: true,
			elements: {
				line: {
					fill: false
				}
			},
			scales: {
				xAxes: [
					{
						stacked: true,
						id: 'xAxis1',
						type: 'category',
						categoryPercentage: 1.0,
						gridLines: {
							drawOnChartArea: true,
							drawTicks: false,
							offsetGridLines: false,
						},
						ticks: {
							fontColor: '#454545',
							fontSize: 13,
							padding: 10
						},
					},
					{
						stacked: true,
						id: 'xAxis2',
						type: 'category',
            display: false,
						gridLines: {
							drawOnChartArea: false,
							offsetGridLines: true,
							drawBorder: false,
							drawTicks: false
						},
						ticks: {
							fontSize: 13,
							autoSkip: false,
							maxRotation: 0,
							minRotation: 0
						}
					}
				],
				yAxes: [{
					stacked: true,
					barPercentage: 1.0,
					categoryPercentage: 1.0,
					gridLines: {
						display: false
					},
					ticks: {
						beginAtZero: true,
						fontColor: '#454545',
						fontSize: 13
					}
				}]
			}
		};


var ctxBar = document.getElementById("myChart");
var myBarChart = new Chart(ctxBar, {
  type: 'bar',
  data: data,
  options: options
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>