ChartJS tooltip label for pie cart being cut - chart.js

Question

I am trying to add tooltip in my chart, however some of them the label are being cut.
Hier is my code
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
title: {
display: true,
text: title,
fontSize: 36
},
tooltips: {
bodyFontSize: 22,
callbacks: {
label: function (tooltipItem, data) {
var number = data.datasets[0].data[tooltipItem.index];
var label = data.labels[tooltipItem.index];
var sum = data.datasets[0].data.reduce(function (a, b) { return a + b; }, 0);
var percentage = getPercent(number, sum);
return label + " " + Math.round(percentage) + " %";
}
}
}
}
Can anyone help me to make the label rendered properly? Many thanks
Regards

Answer 1

I would say your tooltip is going off the edge of your canvas, have a look at this jsfiddle for an example. Or see sample code at the end.
Or, without seeing the full code, I might assume that your 2014 chart is overlapping the 2015 chart. Maybe fixed with a z-index in CSS, but then the opposite effect with the other chart may happen?
Same code from jsfiddle:
<div style='width: 300px;'>
<canvas id='chart'></canvas>
</div>
var ctx = document.getElementById('chart');
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["I am a really really really really really really really really really really really reallyreally really really really really really long label so long I might go off the chart"],
datasets: [{
data: [5],
}]
},
options: {
legend: {
display: false
},
maintainAspectRatio: false,
title: {
display: false,
fontSize: 16
}
}
});