how to collapse title area in a google chart - google-visualization

Question

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.)
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);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
EDIT
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:
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);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>
There should be a way to tell to Charts to apply these rules:
do not use title at all (omit the space as well)
use a sane horizontal axis labelling at the bottom (with the label's native size)
use all the remaining space for graph itself.
I wonder if it is possible in any way.

Answer 1

You can provide chartArea config in options which take height and width of chart. By using that the extra spacing will be utilized by your chart view.
Refer the code below or fiddle:
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
},
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);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>