Legends not showing properly in google pie chart

Question

I am changing labels, to protect data by replacing it with dummy data with same length. enter image description here

Code Link: https://jsfiddle.net/p_raveen/L84wnc6d/ I am ready to make size of pie chart smaller, but legends should be clearly visible.

ChartArea property not working

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
    ['Type', 'Value'],
    ['Manual Success:362', 362],
    ['Manual Ongoing:2', 2],
    ['Manual Failed:980', 980],
    ['Bulk Success:0', 0],
    ['Bulk Ongoing:0', 0],
    ['Bulk Failed:0', 0],
    ['Api Success:0', 0],
    ['Api Ongoing:0', 0],
    ['Api Failed:0', 0],
  ]);

  var options = {
    title: 'ABC Abcd Abcdef(1234)',
    titleTextStyle: {
      color: '#475F7B',
      fontSize: '16',
      bold: true
    },  
    sliceVisibilityThreshold: 0,
    slices: {
      0: {
        color: 'rgb(16, 148, 25)'
      },
      1: {
        color: 'rgb(51,102,204)'
      },
      2: {
        color: 'rgb(255, 0, 0)'
      },
      3: {
        color: 'rgb(53,94,59)'
      },
      4: {
        color: 'rgb(0,0,128)'
      },
      5: {
        color: 'rgb(114,47,55)'
      },
      6: {
        color: 'rgb(127,255,0)'
      },
      7: {
        color: 'rgb(137,207,240)'
      },
      8: {
        color: 'rgb(248,131,121)'
      }
    },
    legend: {
      position : 'top',
      maxlines: 15,
      textStyle: {
        fontSize: 10,
        bold: true
      }
    },
chartArea:{
      left : '20%',
      top : '20%',
      width : '60%',
      height : '60%',
    }
  };

  var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));

  chart.draw(data, options);
}
</script>
 <div id="pie_chart_1" style="height: 400px;"></div>

I have try using chartArea Property, but It is not working

Answer 1

the L in maxLines should be capitalized

see following working snippet...

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
    ['Type', 'Value'],
    ['Manual Success:362', 362],
    ['Manual Ongoing:2', 2],
    ['Manual Failed:980', 980],
    ['Bulk Success:0', 0],
    ['Bulk Ongoing:0', 0],
    ['Bulk Failed:0', 0],
    ['Api Success:0', 0],
    ['Api Ongoing:0', 0],
    ['Api Failed:0', 0],
  ]);

  var options = {
    title: 'ABC Abcd Abcdef(1234)',
    titleTextStyle: {
      color: '#475F7B',
      fontSize: '16',
      bold: true
    },  
    sliceVisibilityThreshold: 0,
    slices: {
      0: {
        color: 'rgb(16, 148, 25)'
      },
      1: {
        color: 'rgb(51,102,204)'
      },
      2: {
        color: 'rgb(255, 0, 0)'
      },
      3: {
        color: 'rgb(53,94,59)'
      },
      4: {
        color: 'rgb(0,0,128)'
      },
      5: {
        color: 'rgb(114,47,55)'
      },
      6: {
        color: 'rgb(127,255,0)'
      },
      7: {
        color: 'rgb(137,207,240)'
      },
      8: {
        color: 'rgb(248,131,121)'
      }
    },
    legend: {
      position : 'top',
      maxLines: 15,
      textStyle: {
        fontSize: 10,
        bold: true
      }
    },
chartArea:{
      left : '20%',
      top : '20%',
      width : '60%',
      height : '60%',
    }
  };

  var chart = new google.visualization.PieChart(document.getElementById('pie_chart_1'));

  chart.draw(data, options);
}
</script>
 <div id="pie_chart_1" style="height: 400px;"></div>