Remover preenchimento ou margens do Google Charts

// 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>

Violino de exemplo

Como removo preenchimento ou margens neste exemplo?

Ao adicionar e ajustar algumas opções de configuração listadas na documentação da API , você pode criar muitos estilos diferentes. Por exemplo, aqui está uma versão que remove a maior parte do espaço extra em branco, definindo o chartArea.widthpara 100% e chartArea.heightde 80% e movendo o legend.positionpara baixo :

// 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'}
    };

Se você deseja ajustá-lo mais, tente alterar esses valores ou usar outras propriedades no link acima.

Estou muito atrasado, mas qualquer usuário que procure por isso pode obter ajuda. Dentro das opções, você pode passar um novo parâmetro chamado chartArea .

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

As opções esquerda e superior definirão a quantidade de preenchimento da esquerda e da parte superior. Espero que isso ajude.

Cheguei aqui como a maioria das pessoas com esse mesmo problema e fiquei chocado que nenhuma das respostas funcionasse remotamente.

Para qualquer pessoa interessada, aqui está a solução real:

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

A chave aqui não tem nada a ver com os valores "esquerdo" ou "superior". Mas sim que o:

As dimensões do gráfico e da área do gráfico são SET e definidas como SAME VALUE

Como uma emenda à minha resposta. O que foi dito acima resolverá o problema "excessivo" de preenchimento / margem / espaço em branco. No entanto, se você deseja incluir etiquetas de eixos e / ou uma legenda, será necessário reduzir a altura e a largura da área do gráfico para algo ligeiramente abaixo da largura / altura externa. Isso "informará" a API do gráfico que há espaço suficiente para exibir essas propriedades. Caso contrário, ele será excluído com prazer.

Está faltando nos documentos (estou usando a versão 43), mas você pode realmente usar as propriedades direita e inferior da área do gráfico:

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

Portanto, é possível usar largura e altura responsivas completas e impedir que qualquer etiqueta ou legenda do eixo seja cortada.

Existe essa possibilidade, como Aman Virk mencionou :

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

Mas lembre-se de que o preenchimento e a margem não existem para incomodá-lo. Se você tiver a possibilidade de alternar entre diferentes tipos de gráficos, como um ColumnChart e aquele com colunas verticais, precisará de alguma margem para exibir os rótulos dessas linhas.

Se você tirar essa margem, acabará mostrando apenas uma parte dos rótulos ou nenhum rótulo.

Portanto, se você tiver apenas um tipo de gráfico, poderá alterar a margem e o preenchimento, como disse Arman. Mas se for possível mudar, não as altere.

Há um tema disponível especificamente para este

options: {
  theme: 'maximized'
}

dos documentos do gráfico do Google:

Atualmente, apenas um tema está disponível:

'maximizado' - maximiza a área do gráfico e desenha a legenda e todos os rótulos dentro da área do gráfico. Define as seguintes opções:

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