Google Pie Chart Change Text Alignment

1.6k Views Asked by At

Here is my report,

enter image description here

How to change my bottom value one by one instead of scroll.

 var options = {
                legend:'bottom',
                is3D: true
                }
1

There are 1 best solutions below

2
WhiteHat On BEST ANSWER

in order to allow multiple lines on the legend,
you must use legend position --> 'top'
then you can increase the number of --> maxLines

legend: {
  position: 'top',
  maxLines: 3
},

from the documentation...

legend.maxLines - Maximum number of lines in the legend. Set this to a number greater than one to add lines to your legend. This option works only when legend.position is 'top'.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['category', 'value'],
    ['Category 1', 34],
    ['Category 2', 18.7],
    ['Category 3', 18.6],
    ['Category 4', 18.6],
    ['Category 5', 10]
  ]);

  var pie = new google.visualization.PieChart(document.getElementById('chart-pie'));
  pie.draw(data, {
    legend: {
      position: 'top',
      maxLines: 3
    },
    height: 400,
    is3D: true,
    width: 400
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-pie"></div>