Chart area width and height vs.chart options width and height

Question

I'm just getting some experience with Google Charts and I'm having a hard time understanding the difference between setting a width and height in the chart options vs. setting the width and height in the chart area settings. For example, I've seen this done:

    var options = {
        width: '500px',
        height: '400px',
        chartArea: {
            left: "15%",
            top: "5%",
            height: "80%",
            width: "75%"
        },
        //chartArea: { top: 10, left: 80, bottom: 50 },
        legend: { position: 'bottom', alignment: 'start' },
        annotations: { alwaysOutside: true},
        hAxis: {
            gridlines: { count: 10 },
        },

If I had to guess, this is telling Google Charts to use a 'canvas' size of 500 x 400 pixels but the chart itself should only consume 75% of the width of that and 80% of the height. Is this correct?

WhiteHat WhiteHat · Accepted Answer · 2018-04-18T13:49:13

chart options height & width are for the entire chart in respect to the chart's container,
including axis labels, titles, legends, etc...

option chartArea is for the inside portion of the chart,
where the plot actually occurs, excluding any labels on the edges...

the following options will stretch the chart to the full width and height of the chart's container,
and stretch the chart area to the full width and height of the chart,
leaving room on the edges for the labels (top, left, bottom, right)

  chartArea: {
    height: '100%',
    width: '100%',
    top: 32,
    left: 32,
    bottom: 32,
    right: 16
  },
  height: '100%',
  width: '100%',

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var chart = new google.visualization.ChartWrapper({
    chartType: 'ScatterChart',
    containerId: 'chart',
    dataTable: google.visualization.arrayToDataTable([
      ['x', 'y'],
      [10, 15],
      [15, 13],
      [18, 20],
      [24, 26],
      [34, 30],
      [40, 43],
      [49, 48],
      [50, 55],
      [65, 67],
      [70, 70],
      [72, 70],
      [73, 70],
      [80, 85]
    ]),
    options: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 32,
        left: 32,
        bottom: 32,
        right: 16
      },
      height: '100%',
      width: '100%',
      legend: {
        position: 'top'
      }
    }
  });

  chart.draw();
  window.addEventListener('resize', function () {
    chart.draw();
  }, false);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart"></div>

Chart area width and height vs.chart options width and height

1 Answers