Google Pie Chart Legend Display

Question

I am trying to use Google's Pie Chart API and have the chart and legend appear vertically with chart atop and legend below. I only want the chart width to be 300px and have successfully moved the legend below the chart. However, since the width is so small, the legend "cuts off" and adds left/right arrows and #'s to scroll through the Legend items.

I am trying to have the legend also display its items vertically in a list. not left to right, but top to bottom so each item can be seen. I did not see any configuration options for this specific fix in their documentation.

Here is my code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Percentage'],
      ['Trust Funds - 52.6%',     52.6],
      ['Ed & Training - 13.6%',      13.6],
      ['Safety, Health & Env. - 10.5%',  10.5],
      ['Econ Dev & Infrastructure - 9.5%', 9.5],
      ['Admin - 7.2%',    7.2],
      ['Other - 2.2%', 2.2],
      ['Resettlement - 2%', 2],
      ['Matching Gifts/UW - 1.6%', 1.6],
      ['Arts/Culture - 0.8%', 0.8]
    ]);


    var options = {
      colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'],
      pieSliceText:['none'],
      legend:{position: 'bottom'},
      chartArea:{left:6,top:6,width:"300px",height:"300px"}
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

   <div id="chart_div" style="width: 300px; height: 300px;"></div>

Answer 1

Fiddle Linkjust remove the configuration legend:{position: 'bottom'},

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div" style="width: 300px; height: 300px;"></div>

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Percentage'],
      ['Trust Funds - 52.6%',     52.6],
      ['Ed & Training - 13.6%',      13.6],
      ['Safety, Health & Env. - 10.5%',  10.5],
      ['Econ Dev & Infrastructure - 9.5%', 9.5],
      ['Admin - 7.2%',    7.2],
      ['Other - 2.2%', 2.2],
      ['Resettlement - 2%', 2],
      ['Matching Gifts/UW - 1.6%', 1.6],
      ['Arts/Culture - 0.8%', 0.8]
    ]);


    var options = {
    width:'50px',
      colors:['#d1ae2b','#b38849','#d8a35c','#636466','#a09f9f','#31536e','#4c7ea4','#73bfe5','#88d6f8'],
      pieSliceText:['none'],
      chartArea:{left:1,top:6,width:"100%",height:"100px"}
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }