Modify the legend of a double doughnut with chart js

Question

I'm trying to create a legend for a doughnut chart created with chart js. The problem is I have two doughnut charts stacked and when creating the legend it defaults to the labels of the first.

I want the legend to show up with the blue label as CPU and a green label as MEM. Currently the labels when hovering on either doughnut is free and used which I'd like to keep.

here is the script used to create the chart

var responseChartLoad = new Chart(responseChartCanvas, {
    type: 'doughnut',
    data: {
        labels: ["Used", "Free"],
        datasets: [{
            data: [0, 100],
            backgroundColor: [
                '#42a5f5',
                '#eceff1',
            ],
            borderColor: [
                '#FFF',
                '#FFF'
            ],
            borderWidth: 2
        }, {
            data: [0, 100],
            backgroundColor: [
                '#4db6ac',
                '#eceff1',
            ],
            borderColor: [
                '#FFF',
                '#FFF'
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        cutoutPercentage: 50,
        animation: {
            animateRotate: true
        },
        legend: {
            display: true,
            position: 'bottom'
        },
        elements: {
            center: {
                text: 'CPU/MEM',
                fontStyle: 'Helvetica', //Default Arial
                sidePadding: 50 //Default 20 (as a percentage)
            }
        }
    }
});

Answer 1

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>