chartjs / chartjs/chartjs-plugin-datalabels
How to ensure hover tooltip shows the same value as the one displayed on the chart (provided by formatter)
- Dominant language
- JavaScript
- Stars
- 920
- Forks
- 507
- PR merge metrics
- No merged PRs in 30d
Description
If a `formatter` is provided, this has effect on the labels that appear on the chart directly, but it seems not on the tooltip labels. How can I make sure that the tooltips also show the correct label? Is this a feature of datalabels? Or would the expectation be that I have to also override the tooltip formatter directly?
As an example, I have a formatter function that changes the labels to %:
```javascript
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value*100 / sum).toFixed(2)+"%";
return percentage;
},
```
I would like for this same label to appear on the tooltip hover as well, but it seems it only applies to the chart as mentioned.
Let me know if you need any further details. thank you.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reviewing the provided datalabels formatter and the Chart.js tooltip configuration to determine whether the plugin formatter is intended to affect tooltip labels. Done means documenting or confirming how to make the tooltip display the same percentage value, including whether a separate tooltip formatter is required.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100