Chart.js Legend Customization

by kingliam

HTML

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

CSS

* {
  font-family: sans-serif, Helvetica;
}

#js-legend li span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 25px;

  border-radius: 5px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid #fff;
}

JavaScript

var data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

var options = {
  plugins: {
    legend: {
    	display: false
    }
  }
};

const context = document.querySelector("#chart-id");
const chart = new Chart(context, {
  type: "doughnut",
  data,
  options,
  plugins: [{
    beforeInit: function(chart, args, options) {
      // Make sure we're applying the legend to the right chart
      if (chart.canvas.id === "chart-id") {
        const ul = document.createElement('ul');
        chart.data.labels.forEach((label, i) => {
          ul.innerHTML += `
						<li>
							<span style="background-color: ${ chart.data.datasets[0].backgroundColor[i] }">${ chart.data.datasets[0].data[i] }</span>
							${ label }
						</li>
          `;
        });

        return document.getElementById("js-legend").appendChild(ul);
      }

      return;
    }
  }]  
});