Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
Blog Web Dev Removing the Horizontal Margins on a Google Chart Graph

Removing the Horizontal Margins on a Google Chart Graph

By Forrest Smith - Drempd.com

I seem to be able to successfully modify quite a bit with google charts, but I couldn’t find a good way to remove the horizontal padding to the left and right of a google graph.  From what I can find, there really isn’t a good way to do it.  I thought I was close with some of the answers on this page, but nothing seemed to work.  

In the end, I ended up using css to do it, but creating a wrapper div around the chart div, expanding the width of the chart div, setting a negative margin, and an overflow hidden on the wrapper div to hide the padding that gets applied.  Something like:

#graph-wrapper{
   overflow: hidden;
   width: 100%;
}
#graph{
   height: 25%;
   width: 122%;
   margin-left: -11%;
}

I can’t say this is a super-elegant answer to the issue, but it seems to work ok (I had to play around with the width and margin on the #graph).

Posted on May 14, 2016August 26, 2022 in Web Dev
  • Adventure

    • adventure
    • gravelgrinding
    • hiking
    • running
  • The Built Environment

    • architecture
    • urbanity
  • Locations

    • san diego
    • portland
  • Freelance Life

    • freelancing
    • productivity
  • Web Dev

    • css
    • entrepreneurship
    • git
    • handlebars
    • html
    • inkscape
    • photoshop
    • php
    • sass
    • web design
    • web development
    • saphire

drempd | san diego, ca


home contact

adventures san diego urbanity and architecture projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance