Idan Gozlan Idan Gozlan - 10 days ago 5
Javascript Question

Chart.js pie tooltip getting cut

I'm using Chart.js pie chart with tooltips which being cut for some reason.

Screenshot attached, didn't found any attribute/option to take care of it..

Is there anyway to take care of it?Tooltip being cut

Thanks!

Answer

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.