-
Notifications
You must be signed in to change notification settings - Fork 12k
Closed
Labels
Description
Hi all,
I had some problem with long tooltips in doughnut chart.
Which could be googled by following url
http://stackoverflow.com/questions/28476159/chart-js-pie-tooltip-getting-cut
Eventually, I solved this issue with following option code using callbacks.
Can we make this configuration as parameters? Currently chart.js support responsive
and seem to detect width of context.
It seems to be long issue, and will be great if chart.js can support this feature.
Cheers,
var chartOptions = {
title: {
text: titleText
},
legend: {
display: true,
labels: {
fontSize: 10
},
position: 'bottom'
},
tooltips: {
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var linebreakAt = 20;
var value = data.datasets[0].data[tooltipItems.index];
var label = data.labels[tooltipItems.index];
label = value + ' - ' + label;
var returnText = [];
for (var lineIdx = 0; (lineIdx * linebreakAt) < label.length; lineIdx++) {
var currentLoc = lineIdx * linebreakAt;
var lineText;
if ((currentLoc + linebreakAt) < label.length) {
lineText = label.substring(currentLoc, currentLoc + linebreakAt);
} else {
lineText = label.substring(currentLoc, label.length);
}
if (lineIdx == 0) {
returnText = [lineText];
} else {
returnText.push(lineText);
}
}
return returnText;
}
}
}
};Reactions are currently unavailable