Highcharts - issue about full chart width
Solution 1
Chart's width is taken from jQuery.width(container)
, so if you have chart in some hidden tabs or something similar, width will be undefined. In that case default width and height are set (600x400).
Solution 2
I know this is an old question, but I ran into the exact same issue and found another solution that works great.
As of Highcharts 4.1.5 (could be in older versions as well), the chart
object has a reflow()
function. View the documentation here.
reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
Hope it helps someone else.
Comments
-
Deez over 3 years
I'm using Highcharts column chart and I want it to be 100% width responsive chart. The container is a simple
<div>
with no any formatting. When the document loads, the chart is always fixed width 600x400px size. If I resize window or switch to another browser tab, the chart fills the width and becomes responsive full width chart just like I wanted. If I reload page, it's fixed width again. I tried setting width to both container and chart, however, nothing helps. If I move the container div one level above the parent div, It works. How to make the chart become full width on page load also?Thanks