I&#39;m using Highcharts within Zurb&#39;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.

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.

I realize I could set a specific width, but I&#39;d really like to take advantage of Foundation and keep them responsive.

I&#39;ve tweaked the CSS and Highcharts initializations, but I&#39;m stumped. Has anyone else experienced this issue? Can anyone see what I&#39;m missing?

Here&#39;s an excerpt from my HTML:

    &lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;twelve columns&quot;&gt;
        &lt;!--begin tabs below--&gt;	
        &lt;div class=&quot;section-container tabs&quot; data-section=&quot;tabs&quot;&gt;
          &lt;section&gt;
            &lt;p class=&quot;title&quot; data-section-title&gt;&lt;a href=&quot;#&quot;&gt;Heart Disease&lt;/a&gt;&lt;/p&gt;
            &lt;div class=&quot;content&quot; data-section-content id=&quot;heart&quot;&gt;
            
            	&lt;div class=&quot;row feature-chart&quot;&gt;
            		&lt;div class=&quot;large-12 columns&quot;&gt;
                    	&lt;div id=&quot;heartTimeline-container&quot;&gt;
               			&lt;div id=&quot;heartTimeline&quot;&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=&quot;row small-charts&quot;&gt;
            		&lt;div class=&quot;large-6 columns&quot;&gt;
                		&lt;div id=&quot;heartDemo&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--close 6--&gt;
            		&lt;div class=&quot;large-6 columns&quot;&gt;
              			&lt;div id=&quot;heartStages&quot;&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;
   &lt;/div&gt;
   &lt;!--end row--&gt;

Here&#39;s the Highcharts js:
    
    $(function () {
		Highcharts.setOptions({
			colors: [&#39;#1A1A1A&#39;, &#39;#455D78&#39;, &#39;#BDCCD4&#39;, &#39;#999999&#39;, &#39;#B3B3B3&#39;, &#39;#F2F2F2&#39;]
		});
		$(&#39;#heartTimeline&#39;).highcharts({
			chart: {
				type: &#39;area&#39;
			},
			title: {
				text: &#39;Heart Disease Death Rates in the U.S.from 1980-2010&#39;
			},
			subtitle: {
				text: &#39;Source: &lt;a href=&quot;http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp&quot;&gt;&#39;+ 
							&#39;Michigan Department of Community Health&lt;/a&gt;&#39;
			},
			xAxis: {
				labels: {
					formatter: function() {
						return this.value; // clean, unformatted number for year
					}
				}
			},
			yAxis: {
				title: {
					text: &#39;Heart Disease Death Rate Per 100,000 People&#39;
				},
				labels: {
					formatter: function() {
						return this.value / 1 +&#39;k&#39;;
					}
				}
			},
			tooltip: {
				pointFormat: &#39;{series.name} produced &lt;b&gt;{point.y:,.0f}&lt;/b&gt;&lt;br/&gt;deaths per hundred thousand people in {point.x}&#39;
			},
			plotOptions: {
				area: {
					pointStart: 1980,
					marker: {
						enabled: false,
						symbol: &#39;circle&#39;,
						radius: 2,
						states: {
							hover: {
								enabled: true
							}
						}
					}
				}
			},
			series: [{
				name: &#39;Heart Disease&#39;,
				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 () {
		$(&#39;#heartDemo&#39;).highcharts({
			chart: {
				zoomType: &#39;xy&#39;
			},
			title: {
				text: &#39;Most Prevelant Causes and Effects of Heart Disease 2013&#39;
			},
			subtitle: {
				text: &#39;Source: http://circ.ahajournals.org (The American Heart Association)&#39;
			},
			xAxis: [{
				categories: [&#39;Smoking&#39;, &#39;Obesity (BMI &gt; 25 kg) &#39;, &#39;Total cholesterol &gt; 200 mg)&#39;, &#39;High Blood Pressure&#39;, &#39;Diabetes Mellitus&#39;, &#39;Prediabetes&#39;, &#39;Total Cardiovascular Disease&#39;, &#39;Stroke&#39;, &#39;Coronary Heart Disease&#39;, &#39;Heart Failure&#39;],
				labels: {
					rotation: -90,
					align:&#39;right&#39;
				}
			}],
			yAxis: [{ // Primary yAxis
				labels: {
					formatter: function() {
						return this.value +&#39;%&#39;;
					},
					style: {
						color: &#39;#000000&#39;
					}
				},
				title: {
					text: &#39;Men&#39;,
					style: {
						color: &#39;#BDCCD4&#39;
					}
				},
				opposite: true
			
			}, { // Secondary yAxis
				gridLineWidth: 0,
				title: {
					text: &#39;Both Sexes&#39;,
					style: {
						color: &#39;#455D78&#39;
					}
				},
				labels: {
					formatter: function() {
						return this.value +&#39; %&#39;;
					},
					style: {
						color: &#39;#4572A7&#39;
					}
				}
			
			}, { // Tertiary yAxis
				gridLineWidth: 0,
				title: {
					text: &#39;Women&#39;,
					style: {
						color: &#39;#AA4643&#39;
					}
				},
				labels: {
					formatter: function() {
						return this.value +&#39; %&#39;;
					},
					style: {
						color: &#39;#AA4643&#39;
					}
				},
				opposite: true
			}],
			tooltip: {
				shared: true
			},
			legend: {
				layout: &#39;vertical&#39;,
				align: &#39;left&#39;,
				x: 120,
				verticalAlign: &#39;top&#39;,
				y: 80,
				floating: true,
				backgroundColor: &#39;#FFFFFF&#39;
			},
			series: [{
				name: &#39;Both Sexes&#39;,
				color: &#39;#455D78&#39;,
				type: &#39;column&#39;,
				yAxis: 1,
				data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1],
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}, {
				name: &#39;Women&#39;,
				type: &#39;spline&#39;,
				color: &#39;#AA4643&#39;,
				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: &#39;shortdot&#39;,
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}, {
				name: &#39;Men&#39;,
				color: &#39;#BDCCD4&#39;,
				type: &#39;spline&#39;,
				data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5],
				tooltip: {
					valueSuffix: &#39; %&#39;
				}
			}]
		});
	});
			
	$(function () {
		$(&#39;#heartStages&#39;).highcharts({
			chart: {
				type: &#39;column&#39;
			},
			title: {
				text: &#39;Number of Deaths for Different Types of Heart Diseases in the U.S. for 2008&#39;
			},
			subtitle: {
				text: &#39;Source: &lt;a href=&quot;http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf&quot;&gt;&#39;+ 
					&#39;Morbitity &amp; Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease&lt;/a&gt;&#39;
			},
			xAxis: {
				categories: [
					&#39;Coronary Heart Disease&#39;,
					&#39;Heart Attack&#39;,
					&#39;Cardiomyopathy&#39;,
					&#39;Stroke&#39;,
					&#39;Atrial Fibrillation and Flutter&#39;,
					&#39;Heart Failure&#39;,
					&#39;Diseases of Pulmonary Circulation&#39;,
					&#39;Pulmonary Embolism&#39;,
				],
				labels: {
					rotation: -90,
					align:&#39;right&#39;
				}
			},
			yAxis: {
				min: 0,
				title: {
					text: &#39;Heart Disease Diagnostic Category (thousands)&#39;
				}
			},
			tooltip: {
				headerFormat: &#39;&lt;span style=&quot;font-size:10px&quot;&gt;{point.key}&lt;/span&gt;&lt;table&gt;&#39;,
				pointFormat: &#39;&lt;tr&gt;&lt;td style=&quot;color:{series.color};padding:0&quot;&gt;{series.name}: &lt;/td&gt;&#39; +
					&#39;&lt;td style=&quot;padding:0&quot;&gt;&lt;b&gt;{point.y:.1f} &lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&#39;,
				footerFormat: &#39;&lt;/table&gt;&#39;,
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
			series: [{
				name: &#39;Heart Disease Related Deaths for 2008&#39;,
				data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158]
			
			}]
		});
	});

All Dynamic Resizing Solutions on Gang of Coders

Total of 1 Dynamic Resizing Solutions

Responsive Highcharts not sizing correctly until window resize