Why Are Bootstrap Tabs Displaying Tab-Pane Divs With Incorrect Widths When Using Highcharts

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

The Cause

This is not a Highcharts issue, at least not by itself, the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

This causes Highcharts not able to get the expected width to initialize the chart, thus defaults to 600px. This would happen to other tools using the same approach to hide content.

A Pure CSS Solution

Instead of working around the issue with an extra redraw or delayed initialization, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */

Update: We now target inactive tabs directly, via :not(.active), to avoid possible side effect if any.

This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it's efficient as it fixes the width issue in the first place, thus there's no need to workaround the width issue afterward via resize/redraw/reflow using javascript.

Note about cascading order

This patch needs to be loaded after bootstrap css, because of CSS cascading order rules, in short, the latter rule wins.

Demo

Before vs After

Tip: switch to the Profile tab to see the difference.

highcharts graphs in bootstrap tabs are not displaying properly

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

HIghcharts & Bootstrap: Chart on Tab 2 is not appearing. Though First chart is working fine

I've found the answer for the question I've asked above. Please find the solution below:

CSS

<style type="text/css">
      .tab-content .tab-pane .highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

HTML

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>
                    </div> 
            </div>
        </div>
    </div>

And I am calling Highcharts inside some function usually. Have a small code snippet below. It is just to mention for few people how it is coming. Showing for only one chart only beginning.

JS

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

NOTE: Above highchart code is only for demonstration and is incomplete.

I hope this solution will help. Thanks for your time guys.

dotnet highchart asp.net with nav tabs bootstrap

This post is direct answer from ryenus in
Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

The Cause

This is not a Highcharts issue, at least not by itself, the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

This causes Highcharts not able to get the expected width to initialize the chart, thus defaults to 600px. This would happen to other tools using the same approach to hide content.

A Pure CSS Solution

Instead of working around the issue with an extra redraw or delayed initialization, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */

Update: The previous 2-step solution first hides all tabs, then makes the active tab visible again. In comparison, now we have a 1-step solution, which directly targets the inactive tabs.

This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it's efficient as it fixes the width issue in the first place, thus there's no need to workaround the width issue afterward via resize/redraw/reflow using javascript.

Note about cascading order

This patch needs to be loaded after bootstrap css, because of CSS cascading order rules, in short, the latter rule wins.

so, for anyone that having same problem when putting more than one chart in the nav tabs, this will help you through the problem.

Google charts inside bootstrap tabs

After a lot searching i tried this and i solve my issue.

$("a[href='#C']").on('shown.bs.tab', function (e) {    google.load('visualization', '1', {        packages: ['timeline'],        callback: drawChartC    });});

$(function () {
    $('#btn').on('click', function () {
        $('#wrapper').show(function () {
          .....<highcharts code here>...
        });
    });
});

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block;     /* undo display:none          */
height: 0;          /* height:0 is also invisible */ 
overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
height: auto;       /* let the content decide it  */
} /* bootstrap hack end */