CODEWITHSUNDEEP
cssangularchart.js
cosmo
cosmo

Reputation: 761

Chart.js doughnut canvas padding

I currently have a canvas containing a chart.js doughnut inside a div that looks like this:

enter image description here

The canvas has a red background color for visibility. Right now, the chart is centered in the canvas with extra padding on its sides. I'd like the chart to fill the entirety of the canvas so that there is no padding at all, so that the canvas can be aligned similarly to the "CPU" word above. Is there some option in chart.js for this?

Here's the html:

<p class="header">CPU</p>
<div class="doughnut-canvas-container">
   <canvas id="doughnut-canvas" class="chartjs-render-monitor"></canvas>          
</div>

and the CSS: 

.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;
}

Upvotes: 5

Views: 4001

Answers (1)

timclutton
timclutton

Reputation: 13004

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>

Upvotes: 3

Related Questions