Google Visualization Pie Chart text anchor issue and text cut off

1
votes

I am using google pie charts, all is working fine but legend label on right side is cut off.enter image description here

there is also no option in google API to control these labels. here is documentations https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options

for whiteHat please see here are images.. 1sthide-div with hide div

and a div not hide...

no-hide div

1
javascriptgoogle-apigoogle-visualization
is it possible the container elements are not visible when drawn? i've seen similar results... – WhiteHat
ok I tried it also on visible element... NO LUCK – Bilal
I have read this thread also.. stackoverflow.com/questions/20129082/… – Bilal

1 Answers

1
votes

the legend would normally wrap, see following working snippet,
using the options shown in the attached image 

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.PieChart(container);

    var data = google.visualization.arrayToDataTable([
      ['Education', 'People'],
      ['less than high school', 10],
      ['high school', 10],
      ['college associate', 10],
    ]);

    var options = {
      width: '470',
      height: '450',
      chartArea: {
        width: '80%',
        height: '80%',
        left: 100,
      },
      pieSliceTextStyle: {
        color: 'white',
        fontSize: '17.5'
      },
      colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
    };

    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>