title: How to fit Doughnut Chart JS into Bootstrap column?
body: <p>I want my Doughnut graphic from Chart.js to fit into my bootstrap column. I also want this column to be specific size (actually, I more concerned about height). The problem is that size of canvas div is actually bigger than my column div and all charts overlap on each other. Ideally, I want all 4 charts to be aligned to the right of the row and have a little space from the right (some margin of 10px for example).</p>
  
  <p>I've tried to play around with margin/padding settings on the column div and canvas. Can't figure it out...</p>
  
  <p>Here is <a href="http://jsfiddle.net/8kqvyhqv/375/" rel="nofollow noreferrer">jsfiddle</a> example</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-3"&gt;
      Some content
    &lt;/div&gt;
    &lt;div class="col-sm-3"&gt;
      Some other content
    &lt;/div&gt;
  
    &lt;div class="col-sm-2"&gt;&lt;/div&gt;
  
    &lt;div class="col-sm-1"&gt;
      &lt;div class="chart-container" style="position: relative; width: 200px; height: 100px;"&gt;
        &lt;canvas id="chart1" width="200" height="100"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-1"&gt;
      &lt;div class="chart-container" style="position: relative; width: 200px; height: 100px;"&gt;
        &lt;canvas id="chart2" width="200" height="100"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-1"&gt;
      &lt;div class="chart-container" style="position: relative; width: 200px; height: 100px;"&gt;
        &lt;canvas id="chart3" width="200" height="100"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-1"&gt;
      &lt;div class="chart-container" style="position: relative; width: 200px; height: 100px;"&gt;
        &lt;canvas id="chart4" width="200" height="100"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my JS:</p>
  
  <pre><code>var myNewChart;
  var data = [{
    value: 30,
    color: "#F7464A"
  }, {
    value: 50,
    color: "#E2EAE9"
  }, {
    value: 100,
    color: "#D4CCC5"
  }, {
    value: 40,
    color: "#949FB1"
  }, {
    value: 100,
    color: "#4D5360"
  }];
  
  var options = {
    animation: true,
    animationEasing: 'easeInOutQuart',
    animationSteps: 80
  };
  
  //Get the context of the canvas element we want to select
  var ctx1 = document.getElementById("chart1")
    .getContext("2d");
  var ctx2 = document.getElementById("chart2")
    .getContext("2d");
  var ctx3 = document.getElementById("chart3")
    .getContext("2d");
  var ctx4 = document.getElementById("chart4")
    .getContext("2d");
  
  /*******************************************************/
  myNewChart1 = new Chart(ctx1).Doughnut(data, options);
  myNewChart2 = new Chart(ctx2).Doughnut(data, options);
  myNewChart3 = new Chart(ctx3).Doughnut(data, options);
  myNewChart4 = new Chart(ctx4).Doughnut(data, options);
  </code></pre>