Google Charts: Setting padding for the hAxis - google-visualization

Question

My chart is working fine as expected except that the hAxis labels have very little or no padding in between the chart itself and the legend. Is there a way to increase it?
options:
var options = {
colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'],
lineWidth:4,
areaOpacity: 0.15,
width:$(window).width() * 0.5,
height:$(window).width() * 0.25,
animation: {
"startup": true,
duration: 1200,
easing: 'out',
},
fontName: 'Open Sans',
legend: {
position:'bottom',
},
chartArea:{
width:'90%',
height:'80%',
}
};

Answer 1

only option I can think of, would be to modify the labels once the chart is 'ready',
or on 'animationfinish'
in this example, the y position is increased by 4
looks kind of jumpy with the animation,
there may be other options, if you know svg
google.charts.load('current', {
'callback': function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'],
lineWidth:4,
animation: {
startup: true,
duration: 1200,
easing: 'out',
},
areaOpacity: 0.15,
fontName: 'Open Sans',
legend: {
position:'bottom',
},
chartArea:{
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.AreaChart(container);
google.visualization.events.addListener(chart, 'animationfinish', moveLabels);
google.visualization.events.addListener(chart, 'ready', moveLabels);
function moveLabels() {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('y', parseFloat(label.getAttribute('y')) + 4);
}
});
}
chart.draw(data, options);
},
'packages':['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>