4

I am using column google chart. I need to change the direction of column key which is highlighted into red circle in image below.

enter image description here

So what I want to achieve

  1. 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...).

  2. If direction cannot be changed, then how can I remove this from charts

Pirate X
  • 3,023
  • 5
  • 33
  • 60
Kushal Jain
  • 3,029
  • 5
  • 31
  • 48

1 Answers1

6

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>
Pirate X
  • 3,023
  • 5
  • 33
  • 60