title: how to collapse title area in a google chart
body: <p>Look at this simple google chart. I would like to get rid of the unnecessary padding space between the hr tag and the upper part of the graph.
  (I guess it is for title but i'm not using titles.)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
  
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2013',  1000,      400],
            ['2014',  1170,      460],
            ['2015',  660,       1120],
            ['2016',  1030,      540]
          ]);
  
          var options = {
          titleTextStyle : {
              fontSize:1
          },
            title: null,
            hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0}
          };
  
          var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;hr/&gt;
  &lt;div id="chart_div" style="width: 100%; height: 500px;"&gt;&lt;/div&gt;
  &lt;hr/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>EDIT</strong></p>
  <p>I've accepted wahab memon's answer because it addresses directly my original question.
  However, solving my original problem introduces - or reveals, instead - another vertical spacing problem at the bottom.
  Look at this very tall graph (tall graph makes sense eg. for bar charts with many independent values). The 'spacing' up and down to the horizontal axis title is unnecessarily big:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013', 1000, 400],
      ['2014', 1170, 460],
      ['2015', 660, 1120],
      ['2016', 1030, 540]
    ]);
  
    var options = {
      chartArea: {
        width: '80%',
        height: '80%',
        top: 10
      },
      title: null,
      hAxis: {
        title: 'Year',
        titleTextStyle: {
          color: '#333'
        }
      },
      vAxis: {
        minValue: 0
      }
    };
  
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;hr/&gt;
  &lt;div id="chart_div" style="width: 100%; height: 1200px;"&gt;&lt;/div&gt;
  &lt;hr/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>There should be a way to tell to Charts to apply these rules:</p>
  <ul>
  <li>do not use title at all (omit the space as well)</li>
  <li>use a sane horizontal axis labelling at the bottom (with the label's native size)</li>
  <li>use all the remaining space for graph itself.</li>
  </ul>
  <p>I wonder if it is possible in any way.</p>