Width of google chart

Question

I have the following code to creategoogle charts:

google.load("visualization", "1", {packages:["corechart"]});
var options = {
        ....
      }; 
var data = google.visualization.arrayToDataTable([
         ...
        ]);
var chart = new google.visualization.BubbleChart(document.getElementById('consumer_s1'));
chart.draw(data, options);

In the documentation for BubbleChart, Google says "default-width: width of the containing element". I have this container:

<div class="responsive" id="consumer_s1">

with

.responsive{
   height: 100%;
   width: 100%;
}

But when I create the chart, in Firebug I see that Googlechart created these elements:

<div style="position: relative; width: 400px; height: 200px;" dir="ltr">
  <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="Un grafico.">
    <svg width="400" height="200" style="overflow: hidden;" aria-label="Un grafico." aria-hidden="true">
      ......

Why the first div created has that value for height and width??

Answer 1

Example:

function drawChart1() {

        // 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]
        ]);

        // Set chart options
        var options = {
            'title': 'How Much Pizza I Ate Last Night',
            'width': 800,
            'height': 600,
            chartArea: {left: 0, top: 0, width: "100%", height: "100%"}
        };

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

BUT one important thing: if loading of charts is going in hidden area, for example in tabs - size always fall to 400x200, so keep it in mind. In such case for correct initialization of charts use first click on that tab OR any special button with "drawChart1" action ...

Answer 2

I had a similar issue with window resizing. My fix:

var container = document.getElementById("consumer_s1").firstChild.firstChild;
container.style.width = "100%";