Highcharts width exceeds container div on first load
I'm using Highcharts with jQuery Mobile.
I have an area graph being drawn within a jQM data-role="content" container and within that container I have the following divs:
<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
<div id="hg_graph" style="width: 100%"></div>
</div>
My highcharts graph is a basic graph taken from one of their examples where I have not set the chart width property.
On the first load the graph exceeds the width of the containing divs, but when I resize the browser it snaps to the appropriate width.
How can I make it so that the width of it is right on first page load and not just on resize?
I've reviewed similar posts on stack overflow and none of the solutions seem to work.
UPDATES
I've identified the problem is that the dynamically generated
<rect>tag by Highcharts is taking the full width of the browser window on page load and not taking it from the containiner div width at all. Here's the html generated when I inspect:<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>I tried to reproduce in JSFiddle, but it seems to work fine there, which really has me stumped. Here's my JSFiddle code: http://jsfiddle.net/meandnotyou/rMXnY
Answer
To call chart.reflow() helped me.
Docs: http://api.highcharts.com/highcharts#Chart.reflow