score:9

Accepted answer

The additional space is reserved for the legend, which is enabled by default. 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: {
    tooltips: {
      enabled: false
    },
    legend: {
      display: false  // <- the important part
    },
    events: []
  }
});
.wrapper {
  width: 76px;
  height: 76px;
  border: 1px solid black; /* for demonstration purposes*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>


Related Query

More Query from same tag