Google Charts’ padding and margins should be removed.

Problem

Example fiddle

In this case, how can I get rid of the padding and margins?

Asked by Paul Armdam

Solution #1

You may build a variety of styles by adding and tweaking some of the configuration variables mentioned in the API documentation. For example, by increasing the chartArea.width to 100% and chartArea.height to 80% and shifting the legend.position to the bottom, this version removes the majority of the unnecessary blank space:

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

Change these numbers or use the other properties from the link above to fine-tune it even more.

Answered by 0eggxactly

Solution #2

I’m a little late, but anyone looking for this can benefit from it. A new parameter named chartArea can be passed into the options.

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

The padding from the left and top will be defined by the left and top settings. I hope this has been of assistance.

Answered by Aman Virk

Solution #3

I came here with the same problem as the majority of folks and left stunned that none of the solutions even came close to working.

Here is the exact solution for anyone who is interested:

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

The “left” and “top” values have no bearing on the key here. However, rather than the:

As an addendum to my previous response. The above will, in fact, eliminate the problem of “excessive” padding/margin/whitespace. However, if you want to include axis labels and/or a legend, you’ll need to shrink the chart area’s height and width to something significantly smaller than the outer width and height. This tells the chart API that there is enough room to show these properties. Otherwise, it will gladly keep them out.

Answered by pim

Solution #4

Although it isn’t documented (I’m using version 43), the right and bottom properties of the chart area can be used:

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

As a result, you can use the full responsive width and height and avoid cropping any axis labels or legends.

Answered by Rob

Solution #5

A theme has been created expressly for this purpose.

options: {
  theme: 'maximized'
}

the following is taken from the Google chart docs:

There is only one theme available for now:

‘maximized’ – Enlarges the chart area and draws the caption as well as all of the labels within it. The following options are set:

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

Answered by Ludo – Off the record

Post is based on https://stackoverflow.com/questions/9661456/remove-padding-or-margins-from-google-charts