Estoy cambiando las etiquetas para proteger los datos reemplazándolos con datos ficticios con la misma longitud. ingrese la descripción de la imagen aquí
Enlace de código: https://jsfiddle.net/p_raveen/L84wnc6d/ Estoy listo para reducir el tamaño del gráfico circular, pero las leyendas deben ser claramente visibles.
La propiedad ChartArea no funciona
<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>Intenté usar la propiedad chartArea, pero no funciona
la L en maxLines debe estar en mayúscula
ver siguiente fragmento de trabajo...
<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>