Highcharts - issue about full chart width

javascript html css highcharts
Deez picture Deez · May 8, 2013 · Viewed 24.8k times · Source

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

Answer

Paweł Fus picture Paweł Fus · May 8, 2013

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

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More