title: NVD3 Library - Line and Bar Chart - Bar chart doesn't load until window resize
body: <p>I'm trying to create a line and bar chart using the NVD3 javascript library. I have an interesting problem where the lines load perfectly fine, but the bars are omitted on initial page load. But, once I resize the window or do an inspect element n the chart, the bar chart loads.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>// raw @timeline is just JSON
  // This is a rails app
  var timeline = &lt;%=raw @timeline %&gt; 
    var chart_concurrent_users_data = [
      {
        values: timeline.map(function(d) { return {x: d[0], y: d[1] } }),
        key: 'Concurrent Users',
        color: '#C0C0C0',
        yAxis: 2,
        bar: true
      },
      {
        values: timeline.map(function(d) { return {x: d[0], y: d[2] } }),
        key: 'User Joins',
        color: '#5cb85c',
        yAxis: 1
      },
      {
        values: timeline.map(function(d) { return {x: d[0], y: d[3] } }),
        key: 'User Leaves',
        color: '#006699',
        yAxis: 1
      }
    ];
    // User Chart / Leave / Joins
    nv.addGraph(function() {
      var chart_users = nv.models.linePlusBarChart()
        .margin({top: 30, right: 80, bottom: 50, left: 80})
        .color(d3.scale.category10().range());
  
      // FULL Graph
      chart_users.xAxis.tickFormat(function(d) {
        return d ? d3.time.format('%H:%M%')(new Date(d)) : '';
      });
  
      chart_users.xAxis.axisLabel('Time');
  
      chart_users.y2Axis
        .axisLabel('Users joining / leaving')
        .tickFormat(d3.format(',.'));
  
      chart_users.y1Axis
        .axisLabel('Concurrent Users')
        .tickFormat(d3.format(',.'));
  
      chart_users.bars.forceY([0]);
  
      chart_users.lines.forceY([0]);
  
      d3.select('#chart_users svg')
          .datum(chart_concurrent_users_data)
          .call(chart_users);
  
      nv.utils.windowResize(chart_users.update);
  
      return chart_users;
   });
  </code></pre>
  
  <p>I've tested this in both chrome and firefox.</p>
  
  <p>Here are some images of the problem.</p>
  
  <p>On initial load:</p>
  
  <p><a href="https://i.stack.imgur.com/VMrG9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VMrG9.png" alt="enter image description here"></a></p>
  
  <p>After resize:</p>
  
  <p><a href="https://i.stack.imgur.com/LVxwY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVxwY.png" alt="enter image description here"></a></p>
  
  <p>Note I can also resize it back to full screen and the bar chart is still present. Any ideas are greatly appreciated.</p>