JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<button onclick="$.togglediv();">
Toggle div
</button>
<button onclick="$.createChart()">
Update chart
</button>
<p>
Try updating the chart when the container div is displayed/not displayed and see the difference...
</p>
<div id="infos">
&nbsp;<br>&nbsp;
</div>
<div id="container">
<div id="chart">

</div>
</div>

CSS

#chart {
  width: 50%;
  height: 300px;
}
#container {
  background-color: lightblue;
}

JavaScript

$.togglediv = function(){
$('#container').slideToggle(200);
}

//Just copied from google api example...
$.createChart = function(){
// Load the Visualization API and the corechart package.
try {
google.charts.load('current', {'packages':['corechart']});
} catch(e) {console.log('Google api already loaded!')}
      

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        //This is just some junk code to debug the problem...
        var info = "#chart width: "+$('#chart').width();
        if($('#chart').width() == 50){
        info += "<span style=\"display: none;\"> <- WTF? Why 50? Does it mean 50%? I want the pixel value...</span>";
        setTimeout(function(){$('#infos span').fadeIn(300)},1000);
        }
        info += "<br>#chart height: "+$('#chart').height();
        
        // Set chart options
        $('#infos').html(info);
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':$('#chart').width(),
                       'height':$('#chart').height()};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart'));
        chart.draw(data, options);
      }
}