Eliminar el relleno o los márgenes de los gráficos de Google

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');

  var myData = {
    'Mushrooms': 3,
    'Onions': 1,
    'Olives': 1,
    'Zucchini': 1,
    'Pepperoni': 2
  };

  var rows = [];
  for (element in myData) {
      rows.push([element + " (" + myData[element] + ")", myData[element]])
  }
  data.addRows(rows);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':450,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

Violín de ejemplo

¿Cómo elimino el relleno o los márgenes en este ejemplo?

Al agregar y ajustar algunas opciones de configuración que figuran en la documentación de la API , puede crear muchos estilos diferentes. Por ejemplo, aquí hay una versión que elimina la mayor parte del espacio en blanco adicional ajustando el chartArea.widthde 100% y chartArea.heightal 80% y moviendo el legend.positionde abajo :

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

Si desea ajustarlo más, intente cambiar estos valores o usar otras propiedades del enlace de arriba.

Llego bastante tarde, pero cualquier usuario que lo busque puede obtener ayuda. Dentro de las opciones puede pasar un nuevo parámetro llamado chartArea .

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

Las opciones izquierda y superior definirán la cantidad de relleno desde la izquierda y la parte superior. Espero que esto ayude.

Llegué aquí como la mayoría de las personas con este mismo problema, y ​​me quedé sorprendido de que ninguna de las respuestas funcionara ni remotamente.

Para cualquier persona interesada, esta es la solución real:

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

La clave aquí no tiene nada que ver con los valores "izquierdo" o "superior". Pero más bien que el:

Las dimensiones tanto del gráfico como del área del gráfico se establecen y establecen en el MISMO VALOR

Como una enmienda a mi respuesta. Lo anterior resolverá el problema "excesivo" de relleno / margen / espacio en blanco. Sin embargo, si desea incluir etiquetas de ejes y / o una leyenda , deberá reducir la altura y el ancho del área del gráfico, de modo que quede algo por debajo del ancho / alto exterior. Esto "le dirá" a la API de gráficos que hay suficiente espacio para mostrar estas propiedades. De lo contrario, felizmente los excluirá.

Falta en los documentos (estoy usando la versión 43), pero en realidad puede usar la propiedad derecha e inferior del área del gráfico:

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

Por lo tanto, es posible usar el ancho y la altura de respuesta completa y evitar que se corten las etiquetas o leyendas de los ejes.

Existe esta posibilidad como mencionó Aman Virk :

var options = {
    chartArea:{left:10,top:20,width:"100%",height:"100%"}
};

Pero tenga en cuenta que el relleno y el margen no están ahí para molestarlo. Si tiene la posibilidad de cambiar entre diferentes tipos de gráficos como ColumnChart y el que tiene columnas verticales, entonces necesita un margen para mostrar las etiquetas de esas líneas.

Si quita ese margen, terminará mostrando solo una parte de las etiquetas o ninguna etiqueta.

Entonces, si solo tiene un tipo de gráfico, puede cambiar el margen y el relleno como dijo Arman. Pero si es posible cambiar, no los cambie.

Hay un tema disponible específicamente para esto

options: {
  theme: 'maximized'
}

de los documentos gráficos de Google:

Actualmente solo hay un tema disponible:

'maximizado': maximiza el área del gráfico y dibuja la leyenda y todas las etiquetas dentro del área del gráfico. Establece las siguientes opciones:

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}