change the aspect ratio of a donut/pie chart

[etuan]

Thanks for the great work on this library.
I would love it if I could make the aspect ratio of a canvas with a pie or donut chart 1:1. The extra padding on the left and right makes it harder to add a legend.

[fulldecent]

Could you please create a JSBIN that illustrates what is not able to be done.

[guyzmo]

Hi,

👍 for the great work as well. Though here's complements to @etuan 's report:

I'm actually having the same problem, here's a screenshot of the context of the problem:

and a jsbin showing it off. My problem is that I'm showing off 4 donuts in a row, and they're not centered to the encapsulating div tag, making all the charts uncentered from the accompanying text and page layout.

[guyzmo]

The only workaround I found has been to add a style to the doughnuts to setup left-margin: -15px; on the canvas. This is not ideal, and not a solution to the causes, but at least it's working ;-)

[Kukunin]

👍

[Kukunin]

There is workaround to set

Chart.defaults.global.maintainAspectRatio = false;

and set width/height for container

[norachuga]

None of these workarounds really work for responsive charts.

[michaeloxborrow]

Well?! What is the correct way to deal with this?
The pie chart occupies an area much smaller than it's container's width.

[fulldecent]

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

• http://jsbin.com/
• http://jsfiddle.net/
• http://codepen.io/pen/
• Premade template: http://codepen.io/pen?template=JXVYzq

[Eldar88]

Hi I'm using version: 2.7.1 and I have this problem, the canvas size is rectangle instead of squared, how to fix this?

[simonbrunel]

aspectRatio: 1 in the chart options

[eliduke]

@simonbrunel This took A LOT of googling and finally I found the solution here. It isn't mentioned anywhere in the docs.

[sht5]

aspectRatio: 1 in the chart options
please mention in docs for future users. wasted nights on working around this

[amatiyko]

@sht5, @simonbrunel
Could you please tell, where exactly should I place aspectRatio: 1 in the chart options?
this didn't work for me:

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
    datasets: [{
      backgroundColor: [
        "#2ecc71",
        "#3498db",
        "#95a5a6",
        "#9b59b6",
        "#f1c40f",
        "#e74c3c",
        "#34495e"
      ],
      data: [12, 19, 3, 17, 28, 24, 7]
    }]
  },
  options: {
    aspectRatio: 1,
    legend: {
      display: false,
    },  
  }
});

thank you in advance!

[simonbrunel]

@amatiyko your snippet should work but maybe you are not using the latest version?

@sht5 feel free to submit a PR with the docs updated (responsive.md)

[amatiyko]

@simonbrunel the reason was in version, thank you very much!

[danielcb29]

This PR adds the docs update #5756 :)