I am using the aurelia plugin for chart js and have a dynamic Doughnut chart. I have set responsive to false for the chart as I would like it to remain a fixed width and height throughout all screen/device sizes. However, I cannot keep the chart centered as the canvas element overflows its container. If I set a max-width on the canvas element...it keeps the chart centered but pletely distorts the doughnut by squishing it. See images:

Here is the chart at a large screen size, rendering properly:

As I decrease the viewport, the canvas element overflows its container, keeping the chart centered in the 'canvas' element but it's overflowing its container so it's not centered how it should be:

If I set a max-width on the canvas, it keeps the chart centered but seriously distorts the doughnut:

I cannot use the responsive option for chart.js doughnut as this causes it to bee way too small at certain screen sizes. How can I just keep this fixed width and height that I have while keeping the chart centered properly. Here's my chart.js options:

        this.doughnutOptions = {
            cutoutPercentage: 80,
            responsive: false,
            tooltips: {
                enabled: false
            }
        }

And how I'm rendering the chart with Aurelia...

<chart id="dynamic-doughnut-chart" type="doughnut" should-update="true" throttle="2000" data.bind="dynamicDoughnutData" native-options.bind="doughnutOptions"></chart>

Any help is much appreciated!

I am using the aurelia plugin for chart js and have a dynamic Doughnut chart. I have set responsive to false for the chart as I would like it to remain a fixed width and height throughout all screen/device sizes. However, I cannot keep the chart centered as the canvas element overflows its container. If I set a max-width on the canvas element...it keeps the chart centered but pletely distorts the doughnut by squishing it. See images:

Here is the chart at a large screen size, rendering properly:

As I decrease the viewport, the canvas element overflows its container, keeping the chart centered in the 'canvas' element but it's overflowing its container so it's not centered how it should be:

If I set a max-width on the canvas, it keeps the chart centered but seriously distorts the doughnut:

I cannot use the responsive option for chart.js doughnut as this causes it to bee way too small at certain screen sizes. How can I just keep this fixed width and height that I have while keeping the chart centered properly. Here's my chart.js options:

        this.doughnutOptions = {
            cutoutPercentage: 80,
            responsive: false,
            tooltips: {
                enabled: false
            }
        }

And how I'm rendering the chart with Aurelia...

<chart id="dynamic-doughnut-chart" type="doughnut" should-update="true" throttle="2000" data.bind="dynamicDoughnutData" native-options.bind="doughnutOptions"></chart>

Any help is much appreciated!

• javascript
• html
• css
• chart.js
• pie-chart

• Have you tried, as stupid as it sounds, to put a div around it and make the div your set width and height to contain the canvas? – Matt Commented Nov 3, 2017 at 19:04
• 1 Did you get any solution for this? @JordanBarber? – Kamran Jabbar Commented Dec 27, 2017 at 18:54

1 Answer 1

As found here, Chart.js Doughnut Chart Sizing, the new ChartJS standard is aspectRatio: 2, so you need to set aspectRatio: 1 on options object.