ChartJS – 有没有办法去除饼图周围的空白？

Question

I am dealing with a chart that has unwanted spacing on left and right side. I've been trying to remove it with no luck, and I don't know what else to do now. I've read the documentation thoroughly, but can't seem to find a solution. Is this possible to do? Let me know if more info is necessary, and I'll supply it.

Edit:

<div>
<canvas id="chart-gender"></canvas>  
</div>


<script>
var gender_data = [10, 35];

var graph_gender_preset = {
    labels: ["Female", "Male"],
    datasets: [
        {
            data: gender_data,
            backgroundColor: ["#0fa0e3", "#ff3549"]
        }
    ]
};

var ctx3 = $("#chart-gender");

var chart_gender = new Chart(ctx3, {
type: 'doughnut',
data: graph_gender_preset,
options: {
        responsive: true,
        title: {
            display: false,
            position: "top",
            fontStyle: "bold",
            fontSize: 0,
            fullWidth: false,
            padding: 0
        },
        legend: {
            display: false,
            position: "top",
            fullWidth: false,
            labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" }

        }
    }
});
</script>

Answer 1

The problem is not the doughnut, it is the canvas in which it is used.

The doughnut has to use a quadratic box, otherwise it would look like an ellipsis. So if you change the size of the canvas and make it quadratic you won't have any borders anymore.

Here is an JS Fiddle example .

<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>
</table>

Answer 2

I've been having the same issue recently. My solution was to change the aspect ratio of the chart with

options: { aspectRatio: 1 }

According to the docs here the default is set to 2. If you change it to 1, the chart canvas will be square and there won't be all that whitespace around your doughnut / pie.

Hope this helps someone!

Answer 3

After ton of research, I found that setting width and height will remove that space.

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>

Answer 4

I think responsive needs to be set to false, then the height and width properties work like this:

const options= {
 responsive: false
} 
<div>
  <canvas id="chart-gender" width="300" options={options} height="300"></canvas>  
</div>

Answer 5

You have to set options for your Chart

JS :

options = { aspectRatio: 1 }

HTML :

<canvas baseChart [options]="options"></canvas>