ChartJS – is there any way to remove blank space around pie charts?

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!


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>