My current setup includes a canvas featuring a doughnut chart created with chart.js enclosed in a div element that displays like this:
https://i.sstatic.net/yy1e4.png
The canvas has a red background to enhance visibility. Currently, the chart is centered within the canvas with additional padding on its sides. I am seeking a way to make the chart occupy the entire canvas without any padding so that the alignment of the canvas resembles that of the word "CPU" above it. Is there an option in chart.js that can achieve this?
Here is the HTML code:
<p class="header">CPU</p>
<div class="doughnut-canvas-container">
<canvas id="doughnut-canvas" class="chartjs-render-monitor"></canvas>
</div>
And here is the accompanying CSS code:
.header {
color: white;
font-size: 16px;
font-weight: bold;
font-family: Verdana;
padding-left: 10px;
}
.doughnut-canvas-container {
width: 30%;
}
#doughnut-canvas {
background-color: red;
}