title: Google Chart Full Screen On Click
body: <p>Is there a way to make a Google Chart full screen on click?</p>
  
  <p>I've been playing around with this for hours </p>
  
  <p>JS - </p>
  
  <pre><code> $('#chart_div').on('click', function(e) {
       $(this).css({
           width: "100%",
           height: "100%",
           margin: "0",
           border: "none"
  
       });
   });
  </code></pre>
  
  <p>CSS - </p>
  
  <pre><code>#chart_div {
      width: 100 px;
      height: 100 px;
      margin: 20 px;
      background - color: red;
      border: 1 px solid black;
  }
  body, html {
      height: 100 % ;
  }
  </code></pre>
  
  <p>​</p>
  
  <p>HTML - 
      You are free to copy and use this sample in accordance with the terms of the
      Apache license (<a href="http://www.apache.org/licenses/LICENSE-2.0.html" rel="nofollow">http://www.apache.org/licenses/LICENSE-2.0.html</a>)</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;
          Google Visualization API Sample
      &lt;/title&gt;
      &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          google.load('visualization', '1', {
              packages: ['corechart']
          });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          google.load("visualization", "1", {
              packages: ["corechart"]
          });
          google.setOnLoadCallback(drawChart);
  
          function drawChart() {
              var data = google.visualization.arrayToDataTable([
                  ['Year', 'Sales', 'Expenses'],
                  ['November', 1000, 400],
                  ['December', 1170, 460],
                  ['January', 660, 1120],
                  ['February', 690, 1120],
                  ['March', 780, 1120],
                  ['April', 820, 1120],
                  ['May', 660, 1120],
                  ['June', 1030, 540]
              ]);
  
              var options = {
                  title: '',
                  backgroundColor: 'none',
                  legend: {
                      position: 'none'
                  },
                  hAxis: {
                      title: 'Year',
                      titleTextStyle: {
                          color: 'grey'
                      }
                  },
                  chartArea: {
                      left: 40,
                      top: 10,
                      width: 900,
                      height: 350
                  }
              };
  
              var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
              chart.draw(data, options);
          }
  
          $('#chart_div').on('click', function(e) {
              $(this).css({
                  width: "100%",
                  height: "100%",
                  margin: "0",
                  border: "none"
  
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body style="font-family: Arial;border: 0 none;"&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  ​
  </code></pre>
  
  <p>​</p>
  
  <p><a href="http://jsfiddle.net/FbKEL/5/" rel="nofollow">http://jsfiddle.net/FbKEL/5/</a></p>
  
  <p>Any help is much appreciated.</p>