Tool tip is cut off on rightmost point

11 thoughts on “Tool tip is cut off on rightmost point”

1. Also having this issue with my pie chart.

   

2. 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.

3. Interestingly, by setting the “tooltipCaretSize” option to “0” solves the issue
   { tooltipCaretSize: 0, … }

4. Ok, sorry about this. I realized I didn’t have an empty div on the page just for the tooltip #chartjs-tooltip rather crucial div I suppose.

5. Thank you @akocmark. Nice and simple solution 👍

6. You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.

   					options: {
   						responsive: true,
   						maintainAspectRatio: false,
   						cutoutPercentage: 60,
   						legend: {
   							display: false
   						},
   						animation: {
   							animateRotate: false
   						},
   						layout: {
   							padding: {
   								right: 40
   							}
   						}
   					}
   

7. @Eshva It’s not a solution, it doesn’t solve the problem for every possible label. Tooltips should be outside of canvas by default, this is the only acceptable solution.

8. I’m closing this issue since it doesn’t appear to happen anymore

   

9. @benmccann: I still experience the issue with chart.js@2.9.3:
   

10. I followed #1731 here as well, and am encountering a similar issue:
    . Please let me know if you’d like me to open a new issue or something!

11. One improvment for the current case when there are too many lines, like in my case 50, it is always below the line picked instead of the side where the biggest tooltip can be shown.
    In my case it would be good to show the tooltip above the line, to see more, even if not all tooltips

    

Comments are closed.