Repository navigation
Custom Tooltips Content (tooltip.body) #2384
Description
Chart Type: PIE / DOUGHNUT
Feature: Tooltips
Hello!
This is mostly just a question. I am attempting to override the tooltip.body value for each pie sector to my own value. I am attempting to change the tool tip to a custom value:
See my attempt below
// Instanciate the doughnut graph.
var myDoughnutChart = new Chart(document.getElementById("market-activation-percentage"), {
type: 'doughnut',
data: {
labels: marketActivationLbls,
datasets: [{
data: Object.keys(realData.market_activation_percentage.data.datasets).map(function(key) {
return realData.market_activation_percentage.data.datasets[key].data[0]
}),
backgroundColor: Object.keys(realData.market_activation_percentage.data.datasets).map(function(key) {
return realData.market_activation_percentage.data.datasets[key].backgroundColor
}),
hoverBackgroundColor: Object.keys(realData.market_activation_percentage.data.datasets).map(function(key) {
return realData.market_activation_percentage.data.datasets[key].hoverBackgroundColor
})
}]
},
options: {
legend: {
display: false,
},
tooltips: {
custom: function(tooltip) {
// tooltip will be false if tooltip is not visible or should be hidden
if (!tooltip) {
return;
}
tooltip.body = ['TEST']
}
}
}
});
Activity
tervay commentedon Apr 27, 2016
I pretty printed this for you (I don't know enough about chart.js to provide a solution).
You can use 3 grave accents instead of just 1 to show code for multiple lines in a row, like this:
and it will show:
Anyway, here's your code cleaned up:
brizido commentedon Apr 28, 2016
I believe I found the issue:
On the file Chart.bundle.js the tooltip.update() is called every time the mouse moves, and since the update doesn't receive a changed variable, the changed flag is set as undefined, which makes the 'custom' function not being called and therefore the body of the tooltip not being updated. A solution would be to pass changed=true on the eventHandler:
I was able to successfully override the tooltip body with this change.
Should I create a PR for this?
etimberg commentedon Apr 28, 2016
@brizido if you could create a PR that'd be great. It's easier to have a look that way
brizido commentedon Apr 28, 2016
@etimberg Actually the change is on the file core.controlle.js.
Can you please add me as an active contributor so I can create a separate branch for the PR?
brizido commentedon Apr 29, 2016
@etimberg Pull request here: #2416
zprisk commentedon May 4, 2016
Changing this.tooltip.update(); to this.tooltip.update(true); appears to make the custom tool tips work as I would expect! Nice job @brizido
panzarino commentedon May 4, 2016
Fixed with PR #2416, fix should be included in next release.
henrrywelson commentedon Dec 27, 2019
How to add an unit for data in tooltips, like "1" , "1 kg"