title: Responsive Highcharts not sizing correctly until window resize
body: <p>I'm using Highcharts within Zurb's Foundation framework for a class project. I have three charts within a section tab. One is within a 12-column div, the other two are on the same row within 6-column divs.</p>
  
  <p>When the page loads, the featured chart does not take up the available width of the 12 columns, and the two smaller charts overflow their 6 columns. However, when the window is resized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions. This behavior occurs in Chrome, FF, and IE.</p>
  
  <p>I realize I could set a specific width, but I'd really like to take advantage of Foundation and keep them responsive.</p>
  
  <p>I've tweaked the CSS and Highcharts initializations, but I'm stumped. Has anyone else experienced this issue? Can anyone see what I'm missing?</p>
  
  <p>Here's an excerpt from my HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="twelve columns"&gt;
      &lt;!--begin tabs below--&gt; 
      &lt;div class="section-container tabs" data-section="tabs"&gt;
        &lt;section&gt;
          &lt;p class="title" data-section-title&gt;&lt;a href="#"&gt;Heart Disease&lt;/a&gt;&lt;/p&gt;
          &lt;div class="content" data-section-content id="heart"&gt;
  
              &lt;div class="row feature-chart"&gt;
                  &lt;div class="large-12 columns"&gt;
                      &lt;div id="heartTimeline-container"&gt;
                      &lt;div id="heartTimeline"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!--close 12 columns--&gt;
              &lt;/div&gt; &lt;!--close row--&gt;
              &lt;div class="row small-charts"&gt;
                  &lt;div class="large-6 columns"&gt;
                      &lt;div id="heartDemo"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--close 6--&gt;
                  &lt;div class="large-6 columns"&gt;
                      &lt;div id="heartStages"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!--close 6--&gt;
              &lt;/div&gt;
              &lt;!--end row--&gt;
          &lt;/div&gt;
        &lt;/section&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;!--end twelve columns--&gt;
  </code></pre>
  
  <p>
     </p>
  
  <p>Here's the Highcharts js:</p>
  
  <pre><code>$(function () {
      Highcharts.setOptions({
          colors: ['#1A1A1A', '#455D78', '#BDCCD4', '#999999', '#B3B3B3', '#F2F2F2']
      });
      $('#heartTimeline').highcharts({
          chart: {
              type: 'area'
          },
          title: {
              text: 'Heart Disease Death Rates in the U.S.from 1980-2010'
          },
          subtitle: {
              text: 'Source: &lt;a href="http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp"&gt;'+ 
                          'Michigan Department of Community Health&lt;/a&gt;'
          },
          xAxis: {
              labels: {
                  formatter: function() {
                      return this.value; // clean, unformatted number for year
                  }
              }
          },
          yAxis: {
              title: {
                  text: 'Heart Disease Death Rate Per 100,000 People'
              },
              labels: {
                  formatter: function() {
                      return this.value / 1 +'k';
                  }
              }
          },
          tooltip: {
              pointFormat: '{series.name} produced &lt;b&gt;{point.y:,.0f}&lt;/b&gt;&lt;br/&gt;deaths per hundred thousand people in {point.x}'
          },
          plotOptions: {
              area: {
                  pointStart: 1980,
                  marker: {
                      enabled: false,
                      symbol: 'circle',
                      radius: 2,
                      states: {
                          hover: {
                              enabled: true
                          }
                      }
                  }
              }
          },
          series: [{
              name: 'Heart Disease',
              data: [412.1, 397, 389, 388, 378, 375, 365.1, 355.9, 352.5, 332, 321.8, 313.8, 306.1, 309.9, 299.7, 296.3, 288.3, 280.4, 272.4, 267.8, 257.9, 247.8, 240.8, 232.3, 217, 211.1, 200.2, 190.9, 186.5, 180.1, 178.5]
          }, ]
      });
  });
  $(function () {
      $('#heartDemo').highcharts({
          chart: {
              zoomType: 'xy'
          },
          title: {
              text: 'Most Prevelant Causes and Effects of Heart Disease 2013'
          },
          subtitle: {
              text: 'Source: http://circ.ahajournals.org (The American Heart Association)'
          },
          xAxis: [{
              categories: ['Smoking', 'Obesity (BMI &gt; 25 kg) ', 'Total cholesterol &gt; 200 mg)', 'High Blood Pressure', 'Diabetes Mellitus', 'Prediabetes', 'Total Cardiovascular Disease', 'Stroke', 'Coronary Heart Disease', 'Heart Failure'],
              labels: {
                  rotation: -90,
                  align:'right'
              }
          }],
          yAxis: [{ // Primary yAxis
              labels: {
                  formatter: function() {
                      return this.value +'%';
                  },
                  style: {
                      color: '#000000'
                  }
              },
              title: {
                  text: 'Men',
                  style: {
                      color: '#BDCCD4'
                  }
              },
              opposite: true
  
          }, { // Secondary yAxis
              gridLineWidth: 0,
              title: {
                  text: 'Both Sexes',
                  style: {
                      color: '#455D78'
                  }
              },
              labels: {
                  formatter: function() {
                      return this.value +' %';
                  },
                  style: {
                      color: '#4572A7'
                  }
              }
  
          }, { // Tertiary yAxis
              gridLineWidth: 0,
              title: {
                  text: 'Women',
                  style: {
                      color: '#AA4643'
                  }
              },
              labels: {
                  formatter: function() {
                      return this.value +' %';
                  },
                  style: {
                      color: '#AA4643'
                  }
              },
              opposite: true
          }],
          tooltip: {
              shared: true
          },
          legend: {
              layout: 'vertical',
              align: 'left',
              x: 120,
              verticalAlign: 'top',
              y: 80,
              floating: true,
              backgroundColor: '#FFFFFF'
          },
          series: [{
              name: 'Both Sexes',
              color: '#455D78',
              type: 'column',
              yAxis: 1,
              data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1],
              tooltip: {
                  valueSuffix: ' %'
              }
          }, {
              name: 'Women',
              type: 'spline',
              color: '#AA4643',
              yAxis: 2,
              data: [16.7, 63.7, 44.9, 32.2, 7.9, 30.5, 34, 3, 5.1, 1.8],
              marker: {
                  enabled: false
              },
              dashStyle: 'shortdot',
              tooltip: {
                  valueSuffix: ' %'
              }
          }, {
              name: 'Men',
              color: '#BDCCD4',
              type: 'spline',
              data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5],
              tooltip: {
                  valueSuffix: ' %'
              }
          }]
      });
  });
  
  $(function () {
      $('#heartStages').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: 'Number of Deaths for Different Types of Heart Diseases in the U.S. for 2008'
          },
          subtitle: {
              text: 'Source: &lt;a href="http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf"&gt;'+ 
                  'Morbitity &amp; Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease&lt;/a&gt;'
          },
          xAxis: {
              categories: [
                  'Coronary Heart Disease',
                  'Heart Attack',
                  'Cardiomyopathy',
                  'Stroke',
                  'Atrial Fibrillation and Flutter',
                  'Heart Failure',
                  'Diseases of Pulmonary Circulation',
                  'Pulmonary Embolism',
              ],
              labels: {
                  rotation: -90,
                  align:'right'
              }
          },
          yAxis: {
              min: 0,
              title: {
                  text: 'Heart Disease Diagnostic Category (thousands)'
              }
          },
          tooltip: {
              headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
              pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                  '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f} &lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
              footerFormat: '&lt;/table&gt;',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
          series: [{
              name: 'Heart Disease Related Deaths for 2008',
              data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158]
  
          }]
      });
  });
  </code></pre>