[Chartjs]-Chart.js doughnut canvas padding

by

3👍

Without seeing your code for creating the chart it’s only possible to guess at what the problem might be.

Generally speaking if you disable the legend and the title the chart should fill to the edge of the canvas, like so:

new Chart(
  document.getElementById('doughnut-canvas'),
  {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [2, 1],
      }]
    },
    options: {
      legend: {
        display: false
      },
      title: {
        display: false
      }
    }
  }
);
body {
  background-color: #000;
}
.header {
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-size: Verdana;
  padding-left: 10px;
}

.doughnut-canvas-container {
  width: 30%;
}

#doughnut-canvas {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<p class="header">CPU</p>
<div class="doughnut-canvas-container">
  <canvas id="doughnut-canvas" class="chartjs-render-monitor"></canvas>
</div>

Leave a comment