Estou usando o Highcharts com o jQuery Mobile.

Eu tenho um gráfico de área sendo desenhado dentro de um jQMdata-role="content" container e dentro desse container eu tenho as seguintes divs:

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

Meu gráfico de altas tabelas é um gráfico básico retirado de um de seus exemplos em que não defini o gráficowidth propriedade.

Na primeira carga, o gráfico excede a largura das divs que contêm, mas quando redimensiono o navegador, ele se encaixa na largura apropriada.

Como posso fazer com que a largura esteja correta no carregamento da primeira página e não apenas no redimensionamento?

Analisei postagens semelhantes no estouro de pilha e nenhuma das soluções parece funcionar.

ATUALIZAÇÕES

Eu identifiquei o problema é que o gerado dinamicamente<rect> A tag Highcharts ocupa toda a largura da janela do navegador no carregamento da página e não a largura da div container. Aqui está o html gerado quando eu inspeciono:

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

Tentei reproduzir no JSFiddle, mas parece funcionar bem lá, o que realmente me deixou perplexo. Aqui está o meu código JSFiddle:http://jsfiddle.net/meandnotyou/rMXnY