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

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>

Trochilus

I've tried adjusting the width itself of the html element and I've tried toggling various width and visibility settings for the chart elements that take up that space by default, like the legend elements. – Trochilus

Ok. From memory, a canvas element is used, correct? If so, I would try adjusting the width etc of the canvas. Does the canvas have attributes set directly on the element ```<canvas width=".." >? Other than that, open dev tools in Chrome > Inspect element and take a look at what is going on with the overall size of the element. – Reform

Correct. I've tried changing size of the canvas element. That's not a problem. Whole canvas gets smaller, but I don't want it smaller, I just want the spacing around to be gone. I've inspected the element, but doesn't help. – Trochilus

No one knows? I'm still struggling with this. – Trochilus

Without checking it out in dev tools, I am of the little help I already suggested. Is the entirety of the white space around the pie chart the canvas, or is there large margins on either side of canvas? – Reform

It's in the canvas element itself, so I believe ChartJS is creating the space when drawing on the canvas. – Trochilus

Is there an option that you can set, regarding margins? – Reform

Unfortunately I couldn't find any in the documentation – Trochilus

Can you provide the code. Is canvas inside any DIV? – Explode

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>

Autacoid

Thank you! I had only done <canvas style="width:100px;height:100px;"></canvas> which didn't work, but forgot about this. – Trochilus

Umm... what? Can you elaborate on this? I'm looking at your fiddle, and I still don't understand how it is working and why it doesn't work for me. What do you mean by "make it quadratic." – Binette

The question is, how is the size of your bounding box of the doughnut calculated? The chartJS claims a width by taking the incoming height. But if the bounding box a greater width you'll get blank space left and/or right within the bounding box. The same applies if you explicitly define a smaller width for the bounding box. Then the chartJS only takes as heights the same value as for width, leading to white space at the top and/or bottom. So the bounding box must have the same width and heights value, which means, it is quadratic. – Autacoid

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!

Chastise

Perfect! Thankyou so much for finding this! I was using some of the workarounds mentioned but it kept making the charts look a lil fuzzy. This way we don't have to sacrifice responsitivity or anything at all. Thanks again!! – Provisory

Omg I've been looking for why my chart stays so small for so long and this finally fixed it. – Birdwell

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>

Stelly

Answer 4

You have to set options for your Chart

JS :

options = { aspectRatio: 1 }

HTML :

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

Warrant

Answer 5

I used "react-minimal-pie-chart" npm, there should remove the rounded attribute for remove the space around the pie-chart.

<PieChart
  animate
  animationDuration={40}
  animationEasing="ease-in"
  data={data1}
  lineWidth={20}
  lengthAngle={360}
  paddingAngle={0}
  radius={30}
  // rounded
  startAngle={175}
  endAngle={150}
/>;

Catarrhine

Answer 6

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>

Contort