Remove column key from google chart - charts

Question

I am using column google chart. I need to change the direction of column key which is highlighted into red circle in image below.
So what I want to achieve
Is there any property so I can change the direction like top, bottom or left side so it displayed properly (Revenue) as of now it display (R...).
If direction cannot be changed, then how can I remove this from charts

Answer 1

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>