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

Based on the Pawel's answer I render the chart at beginning and then resize the chart.

The code used (with bootstrap 3.0.3 and HighCharts 3.0.7)

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#container').highcharts().setSize($('#container').width(),$('#container').height());
})

Source: http://getbootstrap.com/javascript/#tabs-usage