title: Responsive charts using D3pie
body: <p>Im using D3pie so I can make some pie charts based on D3 library. I am trying to make 6 different pie graphs fit in a container. I divided the container into 2 rows (im using bootstrap) each with 3 divs in it. </p>
  
  <p>I can't find a way to make the pie graphs im using fit the screen and be responsive to window resizes. Below is a rough representation of the code just with one example of one chart. The goal would be that the pie graphs would resize themselves based on window resizes and reorganize themselves using bootstrap.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class=".chart-map"&gt;
  &lt;div class="container-fluid"&gt;
   &lt;div class="row"&gt;
    &lt;div id="chart1" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
    &lt;div id="chart2" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
    &lt;div id="chart3" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="row"&gt;
    &lt;div id="chart4" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
    &lt;div id="chart5" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
    &lt;div id="chart6" class="col-xs-6 col-md-4"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var dataset = {
  "header":{
    "title":{
       "text":"Test Data",
       "fontSize":10
    }
  },
  "data":{
    "content":[
       {
          "label":"Male",
          "value":44
       },
       {
          "label":"Female",
          "value":24
       },
       {
          "label":"Undefined",
          "value":30
       }
    ]
  },
  "size":{
    "canvasHeight":$('#chart1').outerHeight(),
    "canvasWidth":$('#chart1').outerWidth()
  },
  "labels":{
    "outer":{
       "pieDistance":10
    }
   }
  };
  
  var pie = new d3pie("chart1", dataset);
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.chart-map{
    width: 600px;
    height: 300px;
  }
  </code></pre>