Chartjs-Modify the legend of a double doughnut with chart js

by

2👍

✅

To accomplish that you would have to generate custom legend items, which could be done using the generateLabels method of legend­‘s labels, as such :

legend: {
   labels: {
      generateLabels: function() {
         return [{
            text: 'CPU',
            fillStyle: '#42a5f5',
            strokeStyle: '#fff'
         }, {
            text: 'MEM',
            fillStyle: '#4db6ac',
            strokeStyle: '#fff'
         }];
      }
   }
}

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

var responseChartLoad = new Chart('responseChartCanvas', {
   type: 'doughnut',
   data: {
      labels: ["Used", "Free"],
      datasets: [{
         data: [10, 100],
         backgroundColor: [
            '#42a5f5',
            '#eceff1',
         ],
         borderColor: [
            '#FFF',
            '#FFF'
         ],
         borderWidth: 2
      }, {
         data: [5, 100],
         backgroundColor: [
            '#4db6ac',
            '#eceff1',
         ],
         borderColor: [
            '#FFF',
            '#FFF'
         ],
         borderWidth: 2
      }]
   },
   options: {
      responsive: true,
      cutoutPercentage: 50,
      animation: {
         animateRotate: true
      },
      legend: {
         display: true,
         position: 'bottom',
         labels: {
            generateLabels: function() {
               return [{
                  text: 'CPU',
                  fillStyle: '#42a5f5',
                  strokeStyle: '#fff'
               }, {
                  text: 'MEM',
                  fillStyle: '#4db6ac',
                  strokeStyle: '#fff'
               }];
            }
         }
      },
      elements: {
         center: {
            text: 'CPU/MEM',
            fontStyle: 'Helvetica', //Default Arial
            sidePadding: 50 //Default 20 (as a percentage)
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="responseChartCanvas"></canvas>

Leave a comment