chartjs display crosshair onHover - chart.js

Question

https://codepen.io/qkreltms/pen/BaaWZeV?editors=0010
I've tried making crosshair when hover on points:
But there are some bugs
Crosshair appears when mouse hover on the almost exactly middle on the points, not any position on points.
Crosshair border keeps thicker when mouse points moves middle on the points.
Any ideas?
Code :
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
}
};
const test = [5, 9, 10, 9, 18, 19, 20];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: test,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: test,
}]
},
options: {
onHover: function(event) {
const chart = myChart.getElementAtEvent(event)[0]._chart;
const activeElements = myChart.getElementsAtEvent(event);
console.log(chart)
if (activeElements.length) {
const activePoint = activeElements[0];
const ctx = chart.ctx;
if (!ctx) {
return;
}
const x = activePoint._view.x;
const y = activePoint._view.y;
const leftX = chart.chartArea.left;
const topY = chart.chartArea.top;
const RightX = chart.chartArea.right;
const bottomY = chart.chartArea.bottom;
ctx.beginPath();
// ctx.setLineDash([5, 15]);
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.moveTo(leftX, y);
ctx.lineTo(RightX, y);
ctx.lineWidth = 1;
ctx.strokeStyle = "#C2C7CC";
ctx.stroke();
ctx.closePath();
}
},
responsive: false,
scales: {
},
animation: {
duration: 750,
},
}
});