Google Charts (JS) - is there a way of using a transparent background on a chart?

Question

I'm using the Google Charts API to include various graphs on a webapp I'm working on. I'm using the javascript chart tools (not the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?

Answer 1

In the Configuration Options of the chart, specify

backgroundColor: { fill:'transparent' }

This worked for me in Chrome and Firefox. It took me some time to find out. The doc page says you can only put in HTML color strings and I assumed 'transparent' was not one of them.

Answer 2

Setting a transparent background for Google Charts:

// Set chart options
var options = {'title':'Chart Title',
'width':600,
'height':300,
'backgroundColor': 'transparent',
'is3D':true
};

JSFIDDLE DEMO

Answer 3

backgroundColor: "00000000" worked for me.

Answer 4

If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.

 fill-opacity="0.0"

Example:

$('#mychart').find('svg rect:eq( 1 )').attr('fill-opacity','0.0');

Use the eq:() selector to select the rectangle you want to be transparent.

Answer 5

On the left of the cart there is a dropdown arrow - click that, and go to "cop chart".

When you paste the chart, you can still choose to link it, and it will paste with the background transparent.