javascript - Issue with displaying Google Chart in a bootstrap tab

Question

I have an issue with displaying a Google Chart in a Boostrap tab. I have two tabs, and a Google Chart in each. In the first one, the chart is correctly displayed, but in the second one, the chart is tiny and compressed. I don't understand why..

Here is my code :

<div class="tab-pane active" id="player">
    <h3>Players' resources</h3>
    <div id="totalPlayerChart" style="height: 500px;"></div>
</div>

<div class="tab-pane" id="producer">
    <h3>Producers' resources</h3>
    <div id="totalProducerChart" style="height: 500px;"></div>
</div>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawTotalPlayerChart);
    google.charts.setOnLoadCallback(drawTotalProducerChart);

    function drawTotalPlayerChart() {
        [...]
        var chart = new google.visualization.LineChart(document.getElementById('totalPlayerChart'));
        chart.draw(data, options);
    }

    function drawTotalProducerChart() {
        [...]
        var chart = new google.visualization.LineChart(document.getElementById('totalProducerChart'));
        chart.draw(data, options);
    }
</script>

Answer 1

While implementing the charts, graphs inside the tabs, the content resize issue may occur.

Reason for this type of issue

In Bootstrap tab, while we switching tabs only the active tab will have the property display: block; rest of the tab-contents are applied to display: none;.

This is the major cause of this issue if the div element has a property display: none;, there the width is also considered as 0px.

To override this issue I have added the following CSS, Instead of hiding the tabs by using display: none;, I handled with height & overflow property by this method the width will not set to 0px.

---

CSS

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

Thanks.

Note: This is one of the methods to resolve this issue using CSS.