Remove padding or margins from Google Charts

Question

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   lt script type  text javascript  src  https   www google com jsapi  gt  lt  script gt  x000D   x000D   lt div id  chart div  gt  lt  div gt  x000D   x000D   x000D    Example fiddle  How do I remove padding or margins in this example

User · Answer

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.

User · Answer

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

User · Answer

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  amp  height and prevent any axis labels or legends from being cropped

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] Remove padding or margins from Google Charts

Examples related to javascript

Examples related to html

Examples related to charts

Examples related to google-visualization