[javascript] Remove padding or margins from Google Charts

_x000D_
_x000D_
// Load the Visualization API and the piechart package._x000D_
google.load('visualization', '1.0', {'packages':['corechart']});_x000D_
_x000D_
// Set a callback to run when the Google Visualization API is loaded._x000D_
google.setOnLoadCallback(drawChart);_x000D_
_x000D_
// Callback that creates and populates a data table,_x000D_
// instantiates the pie chart, passes in the data and_x000D_
// draws it._x000D_
function drawChart() {_x000D_
_x000D_
  // Create the data table._x000D_
  var data = new google.visualization.DataTable();_x000D_
  data.addColumn('string', 'Topping');_x000D_
  data.addColumn('number', 'Slices');_x000D_
_x000D_
  var myData = {_x000D_
    'Mushrooms': 3,_x000D_
    'Onions': 1,_x000D_
    'Olives': 1,_x000D_
    'Zucchini': 1,_x000D_
    'Pepperoni': 2_x000D_
  };_x000D_
_x000D_
  var rows = [];_x000D_
  for (element in myData) {_x000D_
      rows.push([element + " (" + myData[element] + ")", myData[element]])_x000D_
  }_x000D_
  data.addRows(rows);_x000D_
_x000D_
  // Set chart options_x000D_
  var options = {'title':'How Much Pizza I Ate Last Night',_x000D_
                 'width':450,_x000D_
                 'height':300};_x000D_
_x000D_
  // Instantiate and draw our chart, passing in some options._x000D_
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));_x000D_
  chart.draw(data, options);_x000D_
}
_x000D_
<script type="text/javascript" src="https://www.google.com/jsapi"></script>_x000D_
_x000D_
<div id="chart_div"></div>
_x000D_
_x000D_
_x000D_

Example fiddle

How do I remove padding or margins in this example?

This question is related to javascript html charts google-visualization

The answer is


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.


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.


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.


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.


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

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.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to charts

how to set start value as "0" in chartjs? Removing legend on charts with chart.js v2 How to display pie chart data values of each slice in chart.js How to set ChartJS Y axis title? In Chart.js set chart title, name of x axis and y axis? Android charting libraries Click events on Pie Charts in Chart.js Swap x and y axis without manually swapping values How to clear a chart from a canvas so that hover events cannot be triggered? Remove x-axis label/text in chart.js

Examples related to google-visualization

PHP MySQL Google Chart JSON - Complete Example Remove padding or margins from Google Charts Pie chart with jQuery