How can I create a Google Chart that has a 100% width and height? [duplicate]

Question

How can I create a Google Chart that has a 100% width and height?

I've tried using the obvious width: 100% for example but this doesn't work.

Answer 1

From Google's doc:

One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML. If you don't specify a chart size either in the HTML or as an option, the chart might not be rendered properly.

The solution is to specify the width using HTML, rather than using Javascript. So this:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':100%,
  'height':500
}

WILL NOT WORK.

Now here is another tricky bit. If you omit the height from your CSS, it will not work either. The chart will display at the minimum height, which isn't what you want. However, if you add height:100%; that will not make any difference. The chart will still display it its minimum height. Why? Well, in HTML 4, the body element was as large as the entire browser window. Therefore, setting an element's height to 100% would make that element fit to the entire window's size. But in HTML5, the body element, by default, is only as large as its contents. So by setting an element's height to 100% in HTML5, you are only saying you want the element to be as tall as it naturally would be.

The lazy solution would be to remove the DOCTYPE and xlmns attribute at the beginning of the document so your page uses HTML 4 instead, but then any other HTML5 features won't work. So instead, you can set the html/body tag's height to 100% with CSS so it fills your entire browser window, like this:

html, body {
      width: 100%;
      height: 100%;
    }