Chart.js: width and height of a pie chart not respected

Question

I'm using Chart.js to create pie charts. I need each chart to be 76x76px. Unfortunately, the rendered chart is always a bit smaller than the size if the wrapping div and the canvas itself.

If you inspect the chart in the FIDDLE, you'll see what I mean: the canvas element has a fixed size but the chart itself doesn't fill it fully.

It's almost as if there was a top margin reserved for something that isn't there.

The code:

HTML

<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>

JS

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            data: [30, 70],
            backgroundColor: [
                'green',
                'gray'
            ],
            borderWidth: 0
        }]
    },
    options: {
        tooltips: {
             enabled: false
        },
        events: []
    }
});

CSS

.wrapper {
  width: 76px;
  height: 76px;
}

Any ideas what I should do to make the pie chart fill the 76x76px canvas?

andreas · Accepted Answer · 2023-03-07 08:52:28Z

11

The additional space is reserved for the legend, which is enabled by default under options.plugins.legend namespace. Simply disable it and you should have the whole space for the chart:

legend: {
  display: false
}

A working example:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    datasets: [{
      data: [30, 70],
      backgroundColor: [
        'green',
        'gray'
      ],
      borderWidth: 0
    }]
  },
  options: {
    plugins: {
      tooltips: {
        enabled: false
      },
      legend: {
        display: false  // <- the important part
      },
    },
  }
});

.wrapper {
  width: 76px;
  height: 76px;
  border: 1px solid black; /* for demonstration purposes*/
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="wrapper">
  <canvas id="myChart" width="76" height="76"></canvas>
</div>

edited Mar 7, 2023 at 8:52

answered Mar 26, 2018 at 10:36

andreas

17k13 gold badges81 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

lesssugar Over a year ago

Jackpot! It felt kinda weird to be talking about a "margin reserved for something that isn't there" but there we go.

andreas Over a year ago

Well, you're right. You can report that behaviour here, if you want: github.com/chartjs/Chart.js/issues ;)

Systems Rebooter Over a year ago

Bravo!! Sir, you just saved my life!

Leandro Bardelli Over a year ago

Answer is good but doesn't resolve the problem with the last version, tooltip false and legend false

andreas Over a year ago

@Leandro I updated my answer to the latest Chart.js version, my approach is still working.

|

Collectives™ on Stack Overflow

Chart.js: width and height of a pie chart not respected

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related