Chart.js Doughnut Chart Sizing

Question

I'm using ng2-charts in an Angular project. I have two versions of the project. The current production version is old and using an old version of ng2-charts (and, by extension, chart.js). I'm working on upgrading the project. I've run across something weird though.

I'm using the doughnut chart from ng2-charts, and the default size that the chart loads at in the old version is a 1:1 ratio:

You can see that it loads with a height and width of 240px. The weird thing is that in the newer version of ng2-charts/chart.js, the width to height ratio is 2:1:

I am using the same options in the new version, the same setup, etc. The only difference is the package version.

Is there a setting for Chart.js that would help me fix it? I like the size of the old chart, but can't get the new one to do that without allowing the canvas of the chart to bleed outside my component, which for obvious reasons I don't want.

Solution

Set aspectRatio: 1 in the options object provided to Chart.js to get what you're looking for. The default aspectRatio is 2 in the current version (there was a time when it was 1, but that was reverted to improve backwards compatibility). As you might guess, setting it to .5 causes the height of the element to be double that of the width.

Codepen (this pen taken from this Github issue)

Comments

[martinedwards]

This Codepen is constantly refreshing every second, not seen that before. Any ideas?