[Solved]-Chart.js pie tooltip getting cut-Chart.js

Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }

In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:

var chart = new Chart(canvas.getContext("2d"), {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        tooltips: {
            callbacks: {
                title: function(tooltipItems, data) {
                    return tooltipItems[0].xLabel;
                },
                label: function(tooltipItems, data) {
                    return tooltipItems.yLabel;
                },
            }
        },
    },
});

There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064

It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.

In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:

        tooltips.titleMarginBottom = 1;
        tooltips.bodySpacing = 1;
        tooltips.yPadding = 2;

Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below. Would be cool if you could choose which direction the tooltip appears compared to the mouse.

I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.

In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.

Here is the code where I create my labels. The ratings is my actual data defined earlier:

// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
  labels.push("");
}
labels[ratings.length-1] = "       ";

var data = {
  labels: labels,
  datasets: [
      {
          label: "Progress",
          strokeColor: "rgba(255,165,0,1.0)",
          pointColor: "white",
          pointStrokeColor: "rgba(255,165,0,1.0)",
          pointHighlightStroke: "#B87700",
          data: ratings
      }
  ]
};

Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.

Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.

Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.

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
                        }
                    }
                }