Responsive Highcharts not sizing correctly until window resize
JavascriptCssHighchartsZurb FoundationDynamic ResizingJavascript Problem Overview
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.
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'd really like to take advantage of Foundation and keep them responsive.
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?
Here's an excerpt from my HTML:
<div class="row">
<div class="twelve columns">
<!--begin tabs below-->
<div class="section-container tabs" data-section="tabs">
<section>
<p class="title" data-section-title><a href="#">Heart Disease</a></p>
<div class="content" data-section-content id="heart">
<div class="row feature-chart">
<div class="large-12 columns">
<div id="heartTimeline-container">
<div id="heartTimeline"></div>
</div>
</div> <!--close 12 columns-->
</div> <!--close row-->
<div class="row small-charts">
<div class="large-6 columns">
<div id="heartDemo"></div>
</div>
<!--close 6-->
<div class="large-6 columns">
<div id="heartStages"></div>
</div>
<!--close 6-->
</div>
<!--end row-->
</div>
</section>
</div>
</div>
<!--end twelve columns-->
Here's the Highcharts js:
$(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: <a href="http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp">'+
'Michigan Department of Community Health</a>'
},
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 <b>{point.y:,.0f}</b><br/>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 > 25 kg) ', 'Total cholesterol > 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: <a href="http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf">'+
'Morbitity & Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease</a>'
},
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: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
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]
}]
});
});
Javascript Solutions
Solution 1 - Javascript
I got this from another answer, so give thegreyspot some credit in this question.
solution: call $(window).resize(); after the graph is loaded (or when you fill it with data)
Solution 2 - Javascript
Just use the chart.reflow() function
Solution 3 - Javascript
Please take a look at these examples with responsive highcharts:
http://jsbin.com/anuqav/1/edit
http://jsfiddle.net/2gtpA/show/
<div id="container" style="width:100%;margin: 0 auto"></div>
Solution 4 - Javascript
This might help:
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});
Solution 5 - Javascript
for me, it needed to take some delay and trigger the window resize.
window.setTimeout(function(){ $(window).trigger('resize'); }, 500);
Solution 6 - Javascript
You can add an event listener so your chart resizes every time it redraws:
mychart = new Highcharts.stockChart('div', {
chart: {
events: {
redraw: function(e) {
mychart.reflow();
}
}
},
Solution 7 - Javascript
In pure javascript multiple charts in single page resize issue on window resize
window.onresize = function() {
//- Remove empty charts if you are using multiple charts in single page
//- there may be empty charts
Highcharts.charts = Highcharts.charts.filter(function(chart){
return chart !== undefined;
});
Highcharts.charts.forEach(function(chart) {
var height = chart.renderTo.chartHeight;
//- If you want to preserve the actual height and only want to update
//- the width comment the above line.
//- var height = chart.chartHeight;
var width = chart.renderTo.clientWidth;
//- The third args is an animation set to true.
chart.setSize(width, height, true);
});
};
We need this css code as well
.highcharts-container {
width: 100%;
}
.highcharts-container svg {
width: 100%;
display: flex;
}
Solution 8 - Javascript
Sort of an old topic now, but I had this issue with IE8. The current version of IE at the time of writing this is IE10, but I needed to make my site compatible with earlier versions. The solution that worked for me was a combination of above and other sites where people spoke about the solution they implemented. I went for a settimeout plus a resize and just executed for IE8, I hope this helps someone else like myself who tried to find a solution for a few hours.
You may find just the script section is the only section you require.
<!--[if IE 8]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script>
function timeout() {
$(window).resize();
}
window.setTimeout(function() {
timeout();
},2000);
</script>
<style>
.highcharts-container{width:100% !important; height:100% !important;}
</style>
<![endif]-->
Solution 9 - Javascript
You can use this code for the example
var chart;
$(function() {
var newh = $("#container").height();
$( window ).resize(function() {
newh = $("#container").height();
chart.redraw();
chart.reflow();
});
chart = new Highcharts.Chart();
})
Solution 10 - Javascript
only this worked for me
$(window).resize(function(){
$scope.chartConfig.getChartObj().reflow()
});
Solution 11 - Javascript
Just want to add another solution:
$('.chart').highcharts(options, function(chart) {
setTimeout(function() {
chart.reflow();
});
});
What it does is reflowing the chart the next frame after it has been rendered.
Solution 12 - Javascript
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});
it works for me