ChartJS plugin datalabels - How to avoid labels to be out of the canvas

Maybe you can check their documentation about Positioning and particulary the latest 3 sections.

I've made a full example that you can copy paste in their sample doughnut to check if this is what you are looking for, and play around to make the necessary changes:

What I've done:

• multi line text base on its length.
• anchor and align based on text length (center or end).
• the text is never truncate, it's always in the frame of the chart.

config:

{
type: 'doughnut',
dispay: true,
clamp: true,
  data: {
    labels: labels,
    datasets: [{
      data: Utils.numbers({
        count: DATA_COUNT,
        min: 0,
        max: 3
      }),
       backgroundColor: Utils.colors({
          color: Utils.color(0),
          count: DATA_COUNT
        }),
    }]
  },
  options: {
    plugins: {
      datalabels: {
      backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
       borderWidth: 2,
       borderRadius: 5,
       padding: 10,
       borderColor: 'white',
        color: 'white',
        // offset: 10, // Moves labels outward
        clip: false, // Prevents labels from being cut off
        align: function(ctx) {
          return ctx.chart.data.labels[ctx.dataIndex].length > 12 ? 'center' : 'end';
        },
        anchor: function(ctx) {
          return ctx.chart.data.labels[ctx.dataIndex].length > 12 ? 'center' : 'end';
        },
        formatter: (value, ctx) => {
          let label = ctx.chart.data.labels[ctx.dataIndex];
          return label.split(' ').reduce((acc, word) => {
            if (acc.length === 0 || acc[acc.length - 1].length + word.length > 12) {
              acc.push(word);
            } else {
              acc[acc.length - 1] += ' ' + word;
            }
            return acc;
          }, []).join('\n'); // Breaks text into multiple lines
        }
      }
    },
    // Core options
    layout: {
      padding: 25
    },
  }
}

setup:

var DATA_COUNT = 3;
var labels = ['Short Label',
      'A Much Longer Label That Would Normally Be Cut Off',
      'Another Example of a Really Long Label That Needs Wrapping'];

Utils.srand(4);

for (var i = 0; i < DATA_COUNT; ++i) {
  labels.push('' + i);
}