Chart.js pie tooltip getting cut

This improper cutoff was raised as issue#622 in the Github repository for ChartJS.

This was determined to be a bug (evidently this bug hasn’t yet been fixed)

https://github.com/nnnick/Chart.js/issues/622

In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:

I’m sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.

I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
– worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
  tooltipFontSize: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
  percentageInnerCutout : 70
});

Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!

Tooltip displayed well outside the bounds of the canvas:

PS: there’s a line chart example too, which I’m guessing will work
fine with bar charts.