Graphical charts on boot tabs do not display correctly

Question

I have two tabs, tab 1 and tab 2, when the page is initially loaded, the graph in the first tab loads at the same time, which fits right in col-md-6, now when I click tab 2, the graph in this tab collapses almost half the first, I want so that it also col-md-6goes to the right and in order, is there something that I am doing wrong?

Please look at jsfiddle

Answer 1

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

 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
    });
})

Answer 2

<div class="tab-content">
                <div class="tab-pane active" id="1">
                    <div class="col-md-6">
        <div id="graph-container-gray" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                </div>

                </div>
                <div class="tab-pane active" id="2">
                <div class="col-md-6">
                        <div id="graph-container-red" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
                    </div>
                </div>
            </div>