title: Responsive Chart.js Doughnut Chart with minimum height
body: <p>I've been trying to find a nice looking doughnut chart thats responsive and I came across chart.js</p>
  
  <p>However, I am having a really hard time getting the Doughnut Chart be as big as I want it.</p>
  
  <p>Does anyone know how I can make it have a minimum height? I'd love to hear your suggestions.</p>
  
  <p>My goal is to have it fill up the red div both height and width wise. At the moment, this is what I have:
  <img src="https://i.stack.imgur.com/NCzdT.png" alt="enter image description here"></p>
  
  <p>I'm using bootstrap grid</p>
  
  <pre><code>&lt;div class="col-sm-4" style="border:1px solid red;height:350px"&gt;
        &lt;canvas id="weekly_doughnut_data"&gt;&lt;/canvas&gt;
   &lt;/div&gt;
   &lt;div class="col-sm-8"&gt;
        &lt;canvas id="weekly_line_data"&gt;&lt;/canvas&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var weekly_doughnut_data = [
  {
      value: 1,
      color:"#53A3EB",
      highlight: "#53A3EB",
      label: "Simple"
  },
  {
       value: 3,
       color: "#34495e",
       highlight: "#34495e",
       label: "Advanced"
  }];
  var weekly_doughnut_ctx = document.getElementById("weekly_doughnut_data").getContext("2d");
  var weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
  </code></pre>
  
  <p>I've tried a resize function where I set the height myself, but it get's very glitchy (on mouseover) and slow.</p>
  
  <pre><code>$(window).resize(function()
  {
      weekly_doughnut_ctx.canvas.height = $(".canvas_holder").height();
      weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
       //weekly_doughnut_chart.resize();
       //weekly_doughnut_chart.redraw();
  
  });
  </code></pre>