Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

Question

So I\'m creating a page with tabbed content using Twitter\'s Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example

Answer 1

The problem is that Highcharts can not calculate width of the container which has CSS: display:none, so applied is default width (600px). In fact, browser is not able to calculate width for such elements.

For example when you will use separator to resize Result window, chart will resize and will work. So you have three options:

• render chart after first click on that tab
• render chart at the beginning, but after each click and window resize use chart.setSize(w,h) with new width and height
• render chart at the beginning, but after tab click call chart.reflow()