onhover line
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Documentation Is:
- [X] Missing or needed?
- [X] Confusing
- [ ] Not sure?
### Please Explain in Detail...
just want to change point coler when hover line, where to implement onhover function
following is my code
```
const line_chart = new Chart(ctx, {
type: 'line',
data: data2,
options: {
interaction: {
mode: 'point'
},
onHover: (_, elements) => {
line_chart.data.datasets[0].pointBackgroundColor = 'red'
line_chart.update()
},
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
// position: 'top',
display: false,
},
title: {
display: false,
},
tooltip: {
// Disable the on-canvas tooltip
enabled: false,
external: function(context) {
// line_chart.data.datasets[0].pointBackgroundColor = 'red'
// Tooltip Element
let tooltipEl = document.getElementById('dashboard_chart_tooltip');
tooltipEl.style.display = 'flex';
const tooltipModel = context.tooltip;
if (tooltipModel.opacity === 0) {
tooltipEl.style.display = 'none';
// line_chart.data.datasets[0].pointBackgroundColor = 'transparent'
// line_chart.update()
return;
}
const position = context.chart.canvas.getBoundingClientRect();
const bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);
// let data = fake_data.daily.find(item => item.label == tooltipModel.title[0])
document.getElementById('dashboard_chart_tooltip_item_title').innerHTML = 1
document.getElementById('dashboard_chart_tooltip_item_alert_data').innerHTML = 2
document.getElementById('dashboard_chart_tooltip_item_feedback_data').innerHTML = 3
document.getElementById('dashboard_chart_tooltip_item_feedback_in_time_data').innerHTML = 4
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.font = bodyFont.string;
tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
tooltipEl.style.pointerEvents = 'none';
tooltipEl.style.marginLeft = '20px';
// line_chart.update()
}
}
},
scales: {
x: {
display: false,
},
y: {
display: false
}
}
},
});
```
but on hover function trigger when mouse reach canvas (not line)

### Your Proposal for Changes
need code example
### Example
_No response_
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.