New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
tooltipTemplate equivalent in Chart.js 2.0 ? #2322
Comments
@nivv in v2 there are a number of callback functions for creating the tooltip. In your case, you want the label tooltip to be overridden. In your config object: {
tooltip: {
callbacks: {
// tooltipItem is an object containing some information about the item that this label is for (item that will show in tooltip).
// data : the chart data item containing all of the datasets
label: function(tooltipItem, data) {
// Return string from this function. You know the datasetIndex and the data index from the tooltip item. You could compute the percentage here and attach it to the string.
}
}
}
} The default callback for doughnut charts is: https://github.com/nnnick/Chart.js/blob/master/src/controllers/controller.doughnut.js#L95-L97 |
@etimberg thanks for the swift response! I'll try that out! Edit: Noticed that it should be {
tooltips: {
callbacks: {
// tooltipItem is an object containing some information about the item that this label is for (item that will show in tooltip).
// data : the chart data item containing all of the datasets
label: function(tooltipItem, data) {
// Return string from this function. You know the datasetIndex and the data index from the tooltip item. You could compute the percentage here and attach it to the string.
}
}
}
} Complete example this.chart = new Chart(ctx, {
type: 'pie',
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
var label = data.labels[tooltipItem.index];
var percentage = Math.round(value / totalSessions * 100);
return label + ' ' + percentage + '%';
}
}
},
},
data: topBrowsers
}); |
Hi, |
I want to display icons instead of just text so I have to write custom HTML and it is not working |
|
Can't find anything on this. What I want to do is to show percentages in the pie chart. Below worked in Chart.js 1.0
The text was updated successfully, but these errors were encountered: