Highcharts width exceeds container div on first load

Question

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

1. 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>

2. 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 1

To call chart.reflow() helped me. Docs: http://api.highcharts.com/highcharts#Chart.reflow

Answer 2

this works like magic

put in your css file following

.highcharts-container {     width:100% !important;     height:100% !important; }