chartjs / chartjs/Chart.js

onhover line

Open
#11,695 0 comments 0 reactions 0 assignees View on GitHub
type: documentation
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)

![Screenshot 2024-03-01 at 13 55 18](https://github.com/chartjs/Chart.js/assets/152969695/e063efa9-c17d-4696-9b47-7b45da4e935c)

### 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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.