Диаграмма P ie не отображает метку при размещении на вкладке bootstrap 4

Question

<div class="tab-pane fade" id="result" role="tabpanel" aria-labelledby="result-tab">
        <div class="row">


        <div class="col-md-6 result">
        <h5 class="mt-3 text-center">Exam Performance  in  Graph Model</h5>
        <div id="piechart"></div>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

        function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Quarterly Exam ', 8],
        ['Half Yearly Exam', 2],
        ['Yearly Exam', 4],
        ['Final Exam', 2]
        ]);
        var options = {
        title:'',
        is3D: true,
        fontSize:16,
        width:450,
        height:400,
        }

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
        }
        </script>
        </div>

        </div>
        </div>

У меня проблема с диаграммой p ie - когда я помещаю диаграмму p ie во вкладку bootstrap 4, метка не отображается должным образом, но при добавлении в обычный div она работает хорошо.