Remove white-space either side of Line Chart

10,920 views
Skip to first unread message

Andy

unread,
Oct 29, 2010, 4:56:53 AM10/29/10
to Google Visualization API
I'm using a line chart like the one here:
http://code.google.com/apis/visualization/documentation/gallery/linechart.html
- I'd like to set the chart so that it takes up the full width of it's
containing element, however while I can set its width, and the chart
is rendered in an iframe with that width, the chart itself is not so
wide and there is white-space to the left and right of the chart (as
you can see in the documentation's example) which I want to get rid
of. Does anyone know if this is possible?

Thanks.

John Scanlon

unread,
Oct 31, 2010, 10:08:37 AM10/31/10
to google-visua...@googlegroups.com
I've had some success cutting down on the white space by playing with
margin widths: specifically, setting a negative width on the container
div's left margin. Doesn't quite achieve what you want -- the chart
doesn't get any wider -- but it does give you better control of the
space.

John

> --
> You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
> To post to this group, send email to google-visua...@googlegroups.com.
> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
>
>

Jinji

unread,
Nov 1, 2010, 3:47:00 AM11/1/10
to google-visua...@googlegroups.com
Hi,
There's a brand new feature that was just released to our release candidate, that can help you here. A new option called chartArea was added, which allows controlling the location and size of the main chart area. It contains 4 members: top, left, height, width. Each of those 4 members can be either a number, in which case it has a unit of pixels, or a string that ends with '%', in which case it denotes percentage out of the total height/width (respectively). So for example, if you want the main chart area to take the full size of the div, leaving no space for peripheral elements like titles/legend/axis-labels, you could specify chartArea: {top:0, left:0, height:'100%', width:'100%'}. In addition, the new release candidate allows positioning those peripheral elements inside the chart area (on top of the graph itself). All this will be documented when the RC turns final.

To use the release candidate, change the version number in the google.load call from '1' to '1.1'.

Reply all
Reply to author
Forward
0 new messages