41

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

Deez
  • 849
  • 2
  • 9
  • 28
  • please create jsfiddle ? – Vaibhav Jain May 08 '13 at 09:09
  • Can you show some JavaScript code for the chart and some HTML and CSS of the container? It will be difficult to understand the problem without it. – abletterer May 08 '13 at 09:10
  • As strange as it is, the jsfiddle example I created works fine. I guess it might be a global CSS or something that affects my chart. Anyway, here's the code http://jsfiddle.net/zgsDj/ except that in my real page it is not full width on load, but 600px width. – Deez May 08 '13 at 09:38
  • Related: [Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?](https://stackoverflow.com/q/17206631/537554). – ryenus Feb 25 '20 at 16:19

2 Answers2

43

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

Richard Marskell - Drackir
  • 13,080
  • 3
  • 33
  • 54
Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • 12
    "Tabs" was exactly the issue. I was using chart with jQuery UI tabs plugin, and after disabling it, the chart rendered correctly. Now I solved it simply by initializing tabs after the chart has been rendered. – Deez May 08 '13 at 13:32
27

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.

Community
  • 1
  • 1
cohenadair
  • 2,072
  • 1
  • 22
  • 38
  • 3
    Simply writing something like $(".tab1").find(".chartContainer").each(function () { $(this).highcharts().reflow()}) inside my $(".button").click() was way more useful than rendering the charts before hiding them. My situation required me to dynamically create charts based on ajax-gets, so this really the best (and only) solution I could find. Thanks! – NachoDawg Aug 25 '15 at 11:48
  • Perfect!! Works so well! – Amy Neville Jan 02 '16 at 16:50