Chart.js Doughnut chart inner label different than outer

Question

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

So you want to have labels in legend and pop-up after hover to chart part? — SirWojtek
@SirWojtek I want the legend to be the truncated version but the hover over to be the full label. Ie legend = thisismyreallylon... tooltop = thisismyreallylongstring — G3TH
@ℊααnd That 'shouldnt' become an issue since none of the labels will hit that length. Mind telling me how you were able to separate the two? — G3TH

ɢʀᴜɴᴛ ɢʀᴜɴᴛ · Accepted Answer · 2017-08-25T01:04:27

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>

Chart.js Doughnut chart inner label different than outer

2 Answers