Upon hovering over a dot, only a blue line is displayed without showing a tooltip as expected below:
Library Version:
"chart.js": "^2.9.3",
"chartjs-plugin-annotation": "^0.5.7"
Actual : enter image description here
Expected: enter image description here
In chart configuration
export chart = () => {
data:{ ... },
options: {
tooltips: {
displayColors: false,
mode: 'index', intersect: true,
callbacks: {
label: function (tooltipItem, data) {
return `${data.datasets[tooltipItem.datasetIndex].label}(${Math.round(tooltipItem.xLabel * 100) / 100
},${Math.round(tooltipItem.yLabel * 100) / 100})`;
},
},
},
legend: {
display: false,
},
annotation: {
drawTime: "afterDatasetsDraw",
events: ["mouseover"],
annotations: [],
},
}
}
convertToHoverLine();
export const convertToHoverLine = (value, scaleID) => {
return {
key: "hoverLine",
type: "line",
mode: "vertical",
scaleID,
value,
borderColor: "blue",
onMouseout: null,
onMouseover: null,
}
}
handleHoverChart(); => this function will trigger when a user hover a dot on the chart
export const handleHoverChart = (myChart, x, scaleID) => {
const indexLine = myChart.options.annotation.annotations.findIndex(i => i.key === "hoverLine")
if (indexLine === -1) {
myChart.options.annotation.annotations.push(convertToHoverLine(x,scaleID))
} else {
myChart.options.annotation.annotations[indexLine] = convertToHoverLine(x,scaleID);
}
myChart.update()
}