title: nvd3 chart starts out squished in browser
body: <p>I have searched the internet for a solution to this problem but have yet to come across one yet.  I was hoping someone here has had experience with this and can help point me in the right direction.</p>
  
  <p>I have a line chart created with Angular-nvd3 and I am using Bootstrap for responsiveness.  Basically I have two charts per row.  The problem I am running into is that when I first load the page, the charts are squished into a small width.  I am not setting the width on the charts so that it can inherit 100% width and fill the container.  As soon as I do anything with the browser, such as open the console or resize the browser, the charts scale to their correct width.  I was wondering if there was any way to force a resize.  I had a similar issue before when using c3d3 but using chart.resize() solved the issue.  I do not know if nvd3 has a similar method as I do not have as much experience with nvd3.  I was wondering if there was a similar method I could use or if there was a pure way with d3 to do this.</p>
  
  <p>Here are some before and after pics to help visualize the issue:</p>
  
  <p>Before:  <a href="https://i.stack.imgur.com/mjBpq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mjBpq.png" alt="enter image description here"></a></p>
  
  <p>After opening the console or resizing the browser in any way, it scales correctly:  <a href="https://i.stack.imgur.com/fAVES.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fAVES.png" alt="enter image description here"></a></p>
  
  <p>EDIT:  I should add that setting a fixed width circumvents the issue but then the inherent responsiveness goes away (new problems arise where graphs overlap at smaller browser sizes)</p>
  
  <p>EDIT:  Added Some code snippets that I hope can help.  I am using rows and columns the Bootstrap way.  I am also declaring the chart options in the JS</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;nvd3 id="inlet" options="inletOptions" data="inletData"&gt;&lt;/nvd3&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;nvd3 id="outlet" options="outletOptions" data="outletData"&gt;&lt;/nvd3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$scope.inletOptions = {
      chart: {
          type: 'lineChart',
          height: 300,
          margin : {
              top: 20,
              right: 20,
              bottom: 40,
              left: 55
          },
          x: function(d) { return d.x; },
          y: function(d) { return d.y; }
      }
  };
  </code></pre>