Google Pie Chart Change Text Alignment

Here is my report, How to change my bottom value one by one instead of scroll. var options = { legend:'bottom', is3D: true }

Solution 1:

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
  });
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart-pie"></div>