highcharts graphs in bootstrap tabs are not displaying properly

Question

I have two tabs, tab 1 and tab 2, when the page is initially loaded, the graph in the first tab is loaded at the same time, which is fitting right in col-md-6, now, when I click tab 2, the graph in that tab gets collapsed to almost half of the first one, I want it to also fit in the col-md-6 right and fine, Is there anything I'm doing wrong?

Please, have a look at this jsfiddle

Answer 1

use this jquery tab select function, it will solve your problem.

here is modified fiddle click here

 jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) { // on tab selection event
    jQuery( "#graph-container-gray, #graph-container-red" ).each(function() {
        var chart = jQuery(this).highcharts(); // target the chart itself
        chart.reflow() // reflow that chart
    });
})