Я использую Highcharts с jQuery Mobile.

У меня есть график области рисуется в JQMdata-role="content" контейнер и внутри этого контейнера у меня есть следующие div:

<div style="padding-top: 5px; padding-bottom: 10px; position: relative; width: 100%;">
    <div id="hg_graph" style="width: 100%"></div>
</div>

Мой график высоких диаграмм - это базовый график, взятый из одного из их примеров, где я не установил графикwidth свойство.

При первой загрузке график превышает ширину содержащихся div, но когда я изменяю размер браузера, он привязывается к соответствующей ширине.

Как я могу сделать так, чтобы ширина была правильной при первой загрузке страницы, а не только при изменении размера?

Я рассмотрел похожие посты о переполнении стека, и ни одно из решений, похоже, не работает.

ОБНОВЛЕНИЕ

Я определил проблему в том, что динамически генерируется<rect> tag by Highcharts берет всю ширину окна браузера при загрузке страницы и вообще не берет его из ширины div содержимого. Вот HTML, сгенерированный, когда я проверяю:

<rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" **width="1920"** height="200"></rect>

Я пытался воспроизвести в JSFiddle, но, кажется, там работает нормально, что действительно меня озадачило. Вот мой код JSFiddle:http://jsfiddle.net/meandnotyou/rMXnY