[Chartjs]-Chart.js Doughnut chart inner label different than outer

by

1👍

✅

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>

1👍

Ok, I think I have an answer to your question. You must secify label callback function returning a string that should be shown inside tooltip (pop-up):

     options: {
        tooltips: {
          callbacks: {
          label: function (item, data) {
            return 'my custom label text';
          }
        }
     }

Here is Plunker with an example:

https://plnkr.co/edit/fsQu7QNb6PnhnGhgvxR9

Leave a comment