I'm currently utilizing the aurelia plugin for chart js to create a dynamic Doughnut chart. I have disabled the responsive feature for the chart so that it maintains a fixed width and height regardless of screen or device size. However, I am facing an issue with centering the chart as the canvas element exceeds its container. When I try setting a max-width on the canvas element, it centers the chart but distorts the doughnut image by squishing it. Refer to the images below:
Initially, the chart renders properly at a large screen size like this:
https://i.sstatic.net/a8G1k.png
As the viewport size decreases, the canvas element overflows its container, causing the chart to be centered within the canvas but not correctly within the container:
https://i.sstatic.net/lEPol.png
If I apply a max-width to the canvas, it manages to center the chart but severely distorts the doughnut shape:
https://i.sstatic.net/CBKNM.png
I have refrained from using the responsive option in chart.js for the doughnut chart because it makes the chart too small at certain screen sizes. How can I maintain the fixed width and height while ensuring the chart is correctly centered? Below are my chart.js options:
this.doughnutOptions = {
cutoutPercentage: 80,
responsive: false,
tooltips: {
enabled: false
}
}
Here's how I'm rendering the chart using Aurelia...
<chart id="dynamic-doughnut-chart" type="doughnut" should-update="true" throttle="2000" data.bind="dynamicDoughnutData" native-options.bind="doughnutOptions"></chart>
Any assistance on resolving this issue would be greatly appreciated!