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>

It looks like the orientation of the legend is determined by the position you choose, unfortunately. Since you know the colours you are providing, could you not create your own? — cchana
i was hoping to be able to maintain the dynamic nature of the legend list. when you scroll over those items the pie chart "highlights", which is something we want to maintain. but i could easily remove the legend and just hard code a legend. thanks. — Deep Rooted
You can even replicate this functionality with methods and events: google-developers.appspot.com/chart/interactive/docs/gallery/… — cchana
unfortunately i am not too versed in JS, mostly just a css/html guy so i wouldnt know how to do that. but thank you for your help! — Deep Rooted

Innovative Thinker Innovative Thinker · Accepted Answer · 2016-05-20T11:36:42

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

Google Pie Chart Legend Display

1 Answers