Transparant background (Interactive Charts)

9624 views
Skip to first unread message

rein

unread,
Aug 2, 2010, 3:11:31 AM8/2/10
to Google Visualization API
Dear Google Charts users,

I trying to get a transparent background on my Google pie chart.
Someone posted a solution for the image charts:
http://alblue.bandlem.com/2007/12/use-transparent-backgrounds-in-google.html,
but i can't find a solution for the Interactive Charts (using
javascript).

Anyone knows what is have to define at backgroundColor? I tried
backgroundColor:'transparent' and backgroundColor:'none' but that does
not work..

Thanks for your time!

Regards,
Rein

Jinji

unread,
Aug 3, 2010, 5:48:09 AM8/3/10
to google-visua...@googlegroups.com
We are thinking about adding such capability, but this not supported now, sorry.


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


Jré

unread,
Aug 11, 2010, 6:53:07 PM8/11/10
to Google Visualization API
Setting backgroundColor: 'transparent' worked for me but only in
Firefox.
It shows as a black background in all other browsers :(

Cheers,
Jré

On Aug 2, 12:11 am, rein <i...@reinaris.nl> wrote:
> Dear Google Charts users,
>
> I trying to get atransparentbackground on my Google pie chart.
> Someone posted a solution for the image charts:http://alblue.bandlem.com/2007/12/use-transparent-backgrounds-in-goog...,

ChartMan

unread,
Aug 12, 2010, 7:24:05 AM8/12/10
to google-visua...@googlegroups.com
I will record this bug.

Thanks
ChartMan

Jré Sarenac

unread,
Aug 12, 2010, 1:59:08 PM8/12/10
to google-visua...@googlegroups.com
I got it to work by using: backgroundColor: {stroke:null, fill:null, strokeSize: 0}
Although this was only possible thanks to an example I saw as I did not know I could edit specifics of the backgroundColor.
Where can I find detailed information on the properties of vis charts?  I.e where can I find out that the backgroundColor has additional properties of: stroke, fill, strokeSize?

Thanks!
Jré

Jré Sarenac

unread,
Aug 12, 2010, 3:11:48 PM8/12/10
to google-visua...@googlegroups.com
A correction to my previous post:
This method still doesn't work for Internet Explorer.  It works in Firefox, Safari and Chrome.

Cheers,
Jré

ChartMan

unread,
Aug 15, 2010, 8:35:19 AM8/15/10
to google-visua...@googlegroups.com
The corechart package currently does not support the extended color objects {stroke:,fill: strokeSize:}.
If this is a necessary feature for you please revert to the old version of the charts - http://code.google.com/apis/visualization/documentation/gallery/linechart_old.html#backgroundColor

ChartMan

asgallant

unread,
Jul 2, 2012, 1:26:37 PM7/2/12
to google-visua...@googlegroups.com
There are three style classes you have to change to make the background color change:

google-visualization-table-table
google-visualization-table-tr-head
google-visualization-table-tr

and if using alternating rows: 

google-visualization-table-tr-even
google-visualization-table-tr-odd 

and maybe these too, but I'm not sure:

google-visualization-table-th
google-visualization-table-td

You can also set the cssClassNames option to change the class names applied for most of these so the default styles won't be applied.

Set  "background-color: transparent;" for each of these classes and it should work.

On Monday, July 2, 2012 11:42:13 AM UTC-4, Bernardo Martínez wrote:
Have anyone figured this out? cause its been 2 years now and i cant find clear information on how to get transparent background on a table chart.
Thanks for any reply
ChartMan

ChartMan


To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
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-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
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-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

Bernardo Martínez

unread,
Jul 2, 2012, 3:19:49 PM7/2/12
to google-visua...@googlegroups.com
Ok, i did two tests:
1. Changing the respective tr-head, tr, tr-even and tr-odd classes, in the cssClassNames to transparent background, but since also the table has by default a white background, it still doesnt work.
2. In my css y add the class  google-visualization-table-table , and set it to background:transparent, but the javascript loaded from google changes it to the default white.
Hope I explian myself right, since i dont speak english
Thanks for your support asgallant

asgallant

unread,
Jul 2, 2012, 4:23:44 PM7/2/12
to google-visua...@googlegroups.com
Try this:

#myTable table.google-visualization-table-table,
#myTable .google-visualization-table-tr-head,
#myTable .google-visualization-table-tr-over,
#myTable .google-visualization-table-tr,
#myTable .google-visualization-table-tr-head td,
#myTable .google-visualization-table-tr-over td,
#myTable .google-visualization-table-tr td {
    background-colortransparent;
} 

where "myTable" is the id of the table div.

Bernardo Martínez

unread,
Jul 4, 2012, 11:24:33 AM7/4/12
to google-visua...@googlegroups.com
that was really helpful, thanks a lot asgallant!!

Maicol - MasterNet

unread,
Jan 30, 2015, 8:40:37 AM1/30/15
to google-visua...@googlegroups.com, in...@reinaris.nl
Hello everyone, to change a charts background color to transparency, you only need create a style css with:


<style>
rect{
fill:none;
}

</style>

Sergey Grabkovsky

unread,
Jan 30, 2015, 11:27:56 AM1/30/15
to google-visua...@googlegroups.com, in...@reinaris.nl
I would not recommend this method, as it will make all the legend item rectangles transparent. The backgroundColor option is the correct thing to use. You should be able to set it to either 'none' or 'transparent'. Here is a jsfiddle example of doing this: http://jsfiddle.net/xwsp8gkz/

This option should work for all core charts.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages