Chartjs-Legend position is not vertically in middle in Donut chart

by

0👍

Updating to the latest V2 (2.9.4) version of chart.js will resolve your issue:

// chart colors 
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb'];
var donutOptions = {
  cutoutPercentage: 65,
  responsive: true,

  legend: {
    position: 'right',
    padding: 2,
    labels: {
      pointStyle: 'circle',
      usePointStyle: true,
    }
  }
};
// donut 1
var chDonutData1 = {
  labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'],
  datasets: [{
    backgroundColor: colors.slice(0, 4),
    borderWidth: 2,
    data: [74, 11, 40, 20]
  }],


};

var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
  new Chart(chDonut1, {
    type: 'pie',
    data: chDonutData1,
    options: donutOptions
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<div class="">
  <canvas id="chDonut1"></canvas>
</div>

Leave a comment