title: Keep chart.js doughnut with fixed width and height centered in container
body: <p>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:</p>
  
  <p>Here is the chart at a large screen size, rendering properly:</p>
  
  <p><a href="https://i.stack.imgur.com/a8G1k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a8G1k.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/lEPol.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lEPol.png" alt="enter image description here"></a></p>
  
  <p>If I set a max-width on the canvas, it keeps the chart centered but seriously distorts the doughnut:</p>
  
  <p><a href="https://i.stack.imgur.com/CBKNM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CBKNM.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <pre><code>        this.doughnutOptions = {
              cutoutPercentage: 80,
              responsive: false,
              tooltips: {
                  enabled: false
              }
          }
  </code></pre>
  
  <p>And how I'm rendering the chart with Aurelia...</p>
  
  <pre><code>&lt;chart id="dynamic-doughnut-chart" type="doughnut" should-update="true" throttle="2000" data.bind="dynamicDoughnutData" native-options.bind="doughnutOptions"&gt;&lt;/chart&gt;
  </code></pre>
  
  <p>Any help is much appreciated!</p>