Отображение условных обозначений круговых диаграмм Google

Я пытаюсь использовать Google Pie Chart API, чтобы диаграмма и легенда отображались вертикально, а диаграмма была сверху, а легенда — снизу. Я хочу, чтобы ширина диаграммы составляла 300 пикселей, и я успешно переместил легенду под диаграмму. Однако, поскольку ширина настолько мала, легенда «обрезается» и добавляет стрелки влево/вправо и # для прокрутки элементов легенды.

Я пытаюсь, чтобы легенда также отображала свои элементы вертикально в списке. не слева направо, а сверху вниз, чтобы каждый элемент был виден. Я не видел никаких параметров конфигурации для этого конкретного исправления в их документации.

Вот мой код:

<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>