title: Chart.JS full-width, responsive doughnut chart with Bootstrap
body: <p>I'm using the <a href="https://github.com/jtblin/angular-chart.js" rel="noreferrer">Angular.js variant</a> but the core of Chart.js is exactly the same.</p>
  
  <p>I have a simple doughnut chart, that I'm using within a responsive Bootstrap container:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-8"&gt;
         &lt;div class="chart-container"&gt;
            &lt;canvas id="doughnut" 
                    chart-data="data" 
                    chart-labels="labels" 
                    chart-options="mainDonut" 
                    class="chart chart-doughnut"&gt;
            &lt;/canvas&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Nothing fancy. My controller options are:</p>
  
  <pre><code> $scope.mainDonut ={
      percentageInnerCutout : 90,
      responsive: true
  }
  </code></pre>
  
  <p>It seems like the width of the chart is limited to whatever the height of the div is, which for me is magically being set at about 300px by ChartJS for some reason. Here's how it renders:</p>
  
  <p><a href="https://i.stack.imgur.com/XCkxQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XCkxQ.png" alt="chart.js responsive with bootstrap"></a></p>
  
  <p>I want the height to be responsive to whatever my <code>.col-xs-8</code>'s width is, and fill the entire div. <strong>I understand that I can do this with Javascript</strong> by watching for window resize events, but I want to avoid that if possible.</p>
  
  <p>Any solutions here?</p>