Google chart default size

Question

I have a Google chart that is set to 500px by 500px, yet returns 400px by 200px. I have looked at the div, and it shows 500x500. I have no reason for why the chart comes back at 400x200. the div shows 500x500, but the SVG rectangle box shows 400x200, making all of the images smaller.

Is there a setting I don't know?

<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
    <script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    };

    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

  function adjustChart(nm, vl) {
    for (var r=0; r<data.D.length; r++) {
      if (data.D[r].c[0].v == nm) {
        data.D[r].c[1].v = parseInt(vl);
        break;
      }
    }
    chart.draw(data, options);
  }
</script>

Answer 1

There are several ways to set the size of a chart.

The first is to set the size of the element that contains it. The chart will default to the width and height of the containing element (see Google Visualization documentation for default values of height/width).

The second is to not define the actual size of the element, and instead set the height/width of the chart to 500px each manually by adding those to your options:

options = {
  title: 'My Daily Activities'
  ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
  ,height: 500
  ,width: 500
};

What you are actually doing in your code is setting the size of the chart plot itself (not of the overall chart element with the axes, labels, and legend). This will cause the chart plot area to become 500px by 500px if you point to the appropriate div as pointed out by @Dr.Molle in the comments.

Assuming you don't want that, your new options would be:

options = {
  title: 'My Daily Activities'
  ,height: 500
  ,width: 500
};

Answer 2

So setting the height and width as in jmac's answer works, but if you want it responsive there is some additional things I had to do.

But just to back up a second the reason I am having this problem in the 1st place is: The div that this chart is displaying in is not visible when the page loads.

As Seen here the hidden Chart Width is Wrong 400 by 200: jsfiddle.net/muc7ejn3/6/

As Seen here the hidden Chart Width is Correct: jsfiddle.net/muc7ejn3/7/

Another way to do it is just to Un-hide the Chart right before chart.draw() is called, then Hide it again, something like:

tempShowChart();
chart.draw(view, options);
hideChartAgain();

This doesn't handle window being resized.

Answer 3

I have the same case that the rendered graph has a size of 400 x 200px

After being rendered the svg is wrapped inside 3 divs

<div id="gantt-chart" class="svelte-ql38wl">

  <div style="position: relative; width: 400px; height: 200px;">

    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">

      <svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>

    </div>
  </div>
</div>

1. own container set with chart = new google.visualization.Gantt(document.getElementById('gantt-chart'));
2. generated outer wrapper div - width & height set > where? seems to be synced with the svg size
3. generated inner wrapper div - chart area?
4. svg

The inner wrapper div looks like the chart area. Unfortunately changing the values in the options has no effet - always stays 'left: 0px; top: 0px; width: 100%; height: 100%;'

NOTICE I'm drawing a Google Gantt Chart - looks like not all charts have the same possible settings. I find the chartArea option under e.g. 'Column Charts', but it's not listed with 'Gantt Charts'

The main chart documentation says

You can specify the chart size in two places:

1. Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.
2. Specifying the size as a chart option - If the chart size is in the JavaScript, you can copy and paste, or serialize, save, and restore the JavaScript and have the chart resized consistently.

If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

Since it looks like the chart size can only be set as a number for pixels (with the gantt chart again - I saw other examples where it seemed to be possible to set percentage...) in my case these settings helped

1. set css of container div + generated children
2. programmatically set height of chart via js

#gantt-chart {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: auto;
}

#gantt-chart div {
        margin: auto; /* centers chart inside container div with display:flex*/
}

let trackHeight = 30

let options = {
  height: dataTable.getNumberOfRows() * trackHeight + 50
  // width adaps to container div with 100% width
}