Hulothe Hulothe - 1 year ago 60
CSS Question

Hightcharts chart not resizing to fill space

I'm having an issue about a highcharts chart not resizing itself automatically.

Being hidden (

display: none
) at page load because it is under a non-active tab, the chart only fills half of the available space when I open the corresponding tab.

It resizes itself automatically when I resize manually the window, but nothing happens when I trigger
resize
event on
$(window)
from jQuery script...

I have created a fiddle to reproduce the issue: HERE

(On the fiddle the chart remains readable, but doesn't fill the whole available space)

Could someone help me out with that? Thank you in advance!

Answer Source

Changing your HTML/CSS to have a width & min-width will fix this issue.

<div id="chart10_18" style="display: none; width: 100%; min-width: 100%;" class="graph"></div>

Your fiddle is updated here