Chart.js Doughnut chart inner label different than outer

I am trying to create a chart that has a different inner label compared to its 'legend'. Chart.js shrinks when the legend is too long which pushes my chart to a very tiny size. I took the labels and chopped them off after a certain length and that is the new label. However I dont know how to have two separate labels, one so the Legend is the shortened version and one being the normal length. Here is my code:

function truncLabel(str, maxwidth){
if(str.length > maxwidth) {
    str = str.substring(0,24)+"...";
}
return str;
}

for (var i = 0 ; i < labels2Length; i++){
        trunc_labels2[i] = formatLabel(labels2[i],20);
    }


    new Chart(document.getElementById("xxx"), {
        type: 'doughnut',
        data: {
            labels: trunc_labels2,
        datasets: [
            {
            label: labels2,
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#5e5ba3","#9fe7aa","#1a5ba3","#6cba1f","#cacf4f"],
            data:data2
        }
        ]} //More code follows but isnt needed here

Labels2 correctly returns the full string, while trunc_labels2 correctly returns the truncated string. Other types of charts have this feature (ie bar, line etc) but it seems doughnut doesnt? Thank you

Solution

To truncate the labels/strings - use map() method along with substring(), for instance :

let labels = [
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');

Now, to show the original labels on tooltips, use the following tooltip's label callback function :

callbacks: {
   label(t, d) {
      let xLabel = labels[t.index],
          yLabel = d.datasets[t.datasetIndex].data[t.index];
      return xLabel + ': ' + yLabel;
   }
}

^{* make sure labels is a global variable.}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

let labels = [
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet',
   'Lorem ipsum dolor sit amet'
];
let trunc_labels = labels.map(e => e.substring(0, 12) + '...');

let chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: trunc_labels,
      datasets: [{
         data: [1, 1, 1],
         backgroundColor: [
            'rgba(0, 119, 220, 0.8)',
            'rgba(0, 119, 220, 0.6)',
            'rgba(0, 119, 220, 0.4)'
         ]
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label(t, d) {
               let xLabel = labels[t.index],
                   yLabel = d.datasets[t.datasetIndex].data[t.index];
               return xLabel + ': ' + yLabel;
            }
         }
      }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>