Highcharts does not resize charts inside tabs

Question

I am using twitter bootstrap with tabs. I have multiple tabs and charts inside each tab. Upon browser resize, charts that are not on the current active tab do not get resized. Infact, it looks kind of funny with a thin bar. The current active tab works fine. Has anyone seen this issue and are there any workarounds ?

Answer 1

I just solved this issue with the following. Using bootstrap version 3.3.5

I am leaving this here because this link showed up when I googled the issue at the beginning. I hope it helps.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $(e.target.hash).highcharts().reflow();
    });

HTML

<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist" id="taks-tabs">
    <li role="presentation" class="active"><a href="#taks_met_std" aria-controls="taks_met_std" role="tab" data-toggle="tab">Met Standard</a></li>
    <li role="presentation"><a href="#taks_comm_perf" aria-controls="taks_comm_perf" role="tab" data-toggle="tab">Commended Performance</a></li>
    <li role="presentation"><a href="#taks_m_met_std" aria-controls="taks_m_met_std" role="tab" data-toggle="tab">TAKS-M Met Standard</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="taks_met_std"></div>
    <div role="tabpanel" class="tab-pane" id="taks_comm_perf"></div>
    <div role="tabpanel" class="tab-pane" id="taks_m_met_std"></div> 
</div>

Answer 2

This is my fix for this (using jQuery):

$("[data-highcharts-chart]").each(function () {
    var highChart = Highcharts.charts[$(this).data('highchartsChart')];
    var highChartCont = $(highChart.container).parent();
    highChart.setSize(highChartCont.width(), highChartCont.height());
    highChart.hasUserSize = undefined;
});

Call this function whenever the chart gains focus to make sure it is resized properly.