[Chartjs]-Chart.js: width and height of a pie chart not respected

by

11👍

✅

The additional space is reserved for the legend, which is enabled by default under options.plugins.legend namespace. Simply disable it and you should have the whole space for the chart:

legend: {
  display: false
}

A working example:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [30, 70],
      backgroundColor: [
        'green',
        'gray'
      ],
      borderWidth: 0
    }]
  },
  options: {
    plugins: {
      tooltips: {
        enabled: false
      },
      legend: {
        display: false  // <- the important part
      },
    },
  }
});
.wrapper {
  width: 76px;
  height: 76px;
  border: 1px solid black; /* for demonstration purposes*/
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>

Leave a comment