Personalización de la leyenda de Chart.js

Solución:

legendCallback El método se puede utilizar para manipular cómo la leyenda‘s se generan etiquetas. entonces, usando esto puedes personalizar la leyenda‘s color de caja también (por ejemplo, usar conjuntos de datos border-color en lugar de background-color), al igual que :

legendCallback: function(chart) {
   var ul = document.createElement('ul');
   var borderColor = chart.data.datasets[0].borderColor;
   chart.data.labels.forEach(function(label, index) {
      ul.innerHTML += `
        <li>
            <span style="background-color: ${borderColor[index]}"></span>
            ${label}
         </li>
      `; // ^ ES6 Template String
   });
   return ul.outerHTML;
}

ᴅᴇᴍᴏ ⧩

var chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         data: [1, 1, 1],
         backgroundColor: 'rgba(0, 0, 0, 0)',
         borderColor: ['#ff9800', '#e91e63', '#2196f3']
      }]
   },
   options: {
      responsive: false,
      legend: false,
      legendCallback: function(chart) {
         var ul = document.createElement('ul');
         var borderColor = chart.data.datasets[0].borderColor;
         chart.data.labels.forEach(function(label, index) {
            ul.innerHTML += `
            	<li>
               	<span style="background-color: ${borderColor[index]}"></span>
                  ${label}
               </li>
            `; // ^ ES6 Template String
         });
         return ul.outerHTML;
      }
   }
});

legend.innerHTML = chart.generateLegend();

.chart-container {
   display: flex;
}

#legend ul {
   list-style: none;
   font: 12px Verdana;
   white-space: nowrap;
}

#legend li span {
   width: 36px;
   height: 12px;
   display: inline-block;
   margin: 0 5px 8px 0;
   vertical-align: -9.4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div class="chart-container">
   <canvas id="ctx"></canvas>
   <div id="legend"></div>
</div>

---

---

Utiliza Nuestro Buscador