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

Question

Pie chart

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>

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. — Pelle, Jan 09 '17 at 11:35
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 ``` — AshMenhennett, Jan 09 '17 at 12:38
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. — Pelle, Jan 09 '17 at 12:52
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? — AshMenhennett, Jan 10 '17 at 09:32
It's in the canvas element itself, so I believe ChartJS is creating the space when drawing on the canvas. — Pelle, Jan 10 '17 at 14:56

score 18 · Accepted Answer · answered Jan 12 '17 at 10:25

18

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>

answered Jan 12 '17 at 10:25

Oliver

43,366
8
94
151

Thank you! I had only done which didn't work, but forgot about this. – Pelle Jan 12 '17 at 12:20
1

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." – WebWanderer Dec 19 '18 at 20:55
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. – Oliver Dec 20 '18 at 09:08

score 12 · Answer 2 · answered Apr 03 '20 at 12:07

12

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!

answered Apr 03 '20 at 12:07

user2993689

283
3
11

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!! – Sensoray Apr 20 '20 at 19:59
Omg I've been looking for why my chart stays so small for so long and this finally fixed it. – ProblemsOfSumit Apr 08 '21 at 12:29

score 3 · Answer 3 · answered Jul 15 '19 at 19:21

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>

answered Jul 15 '19 at 19:21

Vinay Murakonda

31
1

score 1 · Answer 4 · answered Nov 14 '21 at 07:54

1

You have to set options for your Chart

JS :

options = { aspectRatio: 1 }

HTML :

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

answered Nov 14 '21 at 07:54

Pazu

171
3
8

score 1 · Answer 5 · edited Mar 21 '23 at 23:34

1

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

edited Mar 21 '23 at 23:34

asportnoy

2,218
2
17
31

answered Mar 16 '23 at 09:15

Yogeshraja

35
2

score 0 · Answer 6 · answered Oct 22 '19 at 17:58

0

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>

answered Oct 22 '19 at 17:58

Patrick Ward

402
1
5
12

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

6 Answers6

Linked