Geek Answers Handbook

Google Pie Chart Legend Display

I'm trying to use the Google Pie Chart API, and the chart and legend are displayed vertically with the chart on top and the legend below. I want the chart width to be 300 pixels and successfully move the legend below the chart. However, since the width is so small, the legend "turns off" and adds left / right and # arrows to scroll through the legend elements.

I am trying to make the legend also display its elements vertically in the list. not from left to right, but from top to bottom so that each element can be seen. I have not seen any configuration options for this particular fix in my 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>
+8
google-visualization pie-chart
source share
1 answer

Fiddle Link just 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); }
0
source share

More articles:


All Articles