Remove padding or margins from Google Charts

Question

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

Example fiddle

How do I remove padding or margins in this example?

Colchicum

if anyone want to right justify because you have measurements on the left of line chart, chartArea: {width: '70%', left: '30%'} did the trick for me. Source: code.google.com/p/google-visualization-api-issues/issues/… – Bountiful

@IsmailS, what would if I want padding or margin between chart and text like this see - prnt.sc/8Sxqrp270e9- – Christenechristening

Answer 1

By adding and tuning some configuration options listed in the API documentation, you can create a lot of different styles. For instance, here is a version that removes most of the extra blank space by setting the chartArea.width to 100% and chartArea.height to 80% and moving the legend.position to bottom:

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

If you want to tune it more, try changing these values or using other properties from the link above.

Tubercular

Answer 2

I am quite late but any user searching for this can get help from it. Inside the options you can pass a new parameter called chartArea.

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

Left and top options will define the amount of padding from left and top. Hope this will help.

Joesphjoete

the chartArea.top did the trick for my dynamically-sized div. Thanks. – Printmaking

Answer 3

I arrived here like most people with this same issue, and left shocked that none of the answer even remotely worked.

For anyone interested, here is the actual solution:

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

The key here has nothing to do with the "left" or "top" values. But rather that the:

Dimensions of both the chart and chart-area are SET and set to the SAME VALUE

As an amendment to my answer. The above will indeed solve the "excessive" padding/margin/whitespace problem. However, if you wish to include axes labels and/or a legend you will need to reduce the height & width of the chart area so something slightly below the outer width/height. This will "tell" the chart API that there is sufficient room to display these properties. Otherwise it will happily exclude them.

Sandstone

As an amendment to my answer. This will indeed solve the "excessive" padding/margin/whitespace problem. However, if you wish to include axes labels and/or a legend you will need to reduce the height & width of the chart area so something slightly below the outer width/height. This will "tell" the chart API that there is sufficient room to display these properties. Otherwise it will happily exclude them. – Sandstone

I think the reason the other solutions didn't work for you is probably that they assumed the chart was being inserted into a DIV which already had preset width and height attributes, but you hadn't done that. It's a good idea to preset the height and width in the HTML so that the layout of the page doesn't change when graph gets filled it. That will prevent things from "jumping around" on the page as it loads. – Susumu

@Dave thanks for the suggestion, but I don't necessarily agree. There are plenty of situations where you just simply don't know what those values are going to be. And it looks like at least 15 other people feel as though my offering is adequate. – Sandstone

I agree, Pim. When you don't know the width and/or height in advance (perhaps because you want the page to adapt responsively), you can't preset the width & height in the DIV. I was just pointing out why I think the solutions given in the other answers worked for them but didn't work for you, and why it's a good idea to preset the width and height in the DIV if you can. – Susumu

@PimBrouwers I'm curious how did you find out that both values should be same only then it would work. (It worked, thanks !!) – Lachrymator

@PirateX -- that's a great question, it's been so long I don't recall exactly. I would say, like most of my discoveries, just a s&^%-load of trial and error haha. Thanks for the upvote and more importantly, I'm glad it helped you! – Sandstone

For reasons @DaveBurton points out, this is likely the correct answer if working with CSS Grid (which I am) – Clupeid

Answer 4

It's missing in the docs (I'm using version 43), but you can actually use the right and bottom property of the chart area:

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

So it's possible to use full responsive width & height and prevent any axis labels or legends from being cropped.

Jilleen

Being able to use right is definitely a nice addition, however in the case of a column chart that requires numbers for the vertical axis it will get tricky when the values fluctuate by a good bit - for instance a chart with values that range from 0 - 100 would require a left value of 20 pixels, but 0 - 10 mil would need 100 pixels, and using 100 pixels then would leave a fairly large margin which is what I think all of us are trying to get rid of :) Unless there is an option that allows the chart to adjust its own width that I am missing. Any thoughts on how one might be able to solve this? – Grandee

It looks like they documented it Oct. 2, 2015, here: archive.is/lwbQY#selection-2997.0-3011.1 – Susumu

Answer 5

There's a theme available specifically for this

options: {
  theme: 'maximized'
}

from the Google chart docs:

Currently only one theme is available:

'maximized' - Maximizes the area of the chart, and draws the legend and all of the labels inside the chart area. Sets the following options:

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

Pentlandite

This seems the best option. After setting theme: 'maximized' it is still possible to tune the appearance, e.g. height:' 90%', textPosition: 'out', etc. – Acanthoid

Answer 6

There is this possibility like Aman Virk mentioned:

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

But keep in mind that the padding and margin aren't there to bother you. If you have the possibility to switch between different types of charts like a ColumnChart and the one with vertical columns then you need some margin for displaying the labels of those lines.

If you take away that margin then you will end up showing only a part of the labels or no labels at all.

So if you just have one chart type then you can change the margin and padding like Arman said. But if it's possible to switch don't change them.

Newborn

Answer 7

chartArea:{left:30,top:50,right:20,bottom:50}

Revise

Welcome to StackOverflow. Please, edit and try for How to Answer, describe the effect of what you propose and explain why it helps to solve the problem. Find help with formatting your post here: stackoverflow.com/help/formatting . Consider taking the tour. – Strohben

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Pareto