What you need is the property called chartArea
You can control how much area from top, right, bottom or left to be shown.
Here chart area is area of only the chart, excluding label, legend or any other value other than the chart itself. You can reduce the chart area so that label/legend can come completely.
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
Regarding the legend positioning, you can change place of legend using
legend: {
position: 'left'
}
To remove legends altogether use
legend:{position: 'none'}
See below snippet or this JSFIDDLE to see how it works.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Submitter', 'Count'],
['Service', 168],
['NAME 1', 42],
['NAME 2', 36],
['NAME 3', 35],
['NAME 4', 34],
['NAME 5', 30],
['NAME 6', 24],
['NAME 7', 21],
['NAME 8', 18]
]);
var options = {
pieSliceText: 'percentage',
legend: {
position: 'none'
},
height: '500',
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart6_div"></div>