Hulothe Hulothe - 3 months ago 8
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

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