Keep chart.js doughnut with fixed width and height centered in container

Question

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 completely 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 become 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!

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

Gabriel Bueno Gabriel Bueno · Accepted Answer · 2018-12-24T10:10:36

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.

Keep chart.js doughnut with fixed width and height centered in container

1 Answers