CODEWITHSUNDEEP
google-visualization
johneth
johneth

Reputation: 2928

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

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

Upvotes: 71

Views: 66909

Answers (5)

Jonas Mærsk
Jonas Mærsk

Reputation: 285

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.

Upvotes: 4

Zach Simons
Zach Simons

Reputation: 21

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.

Upvotes: 1

Porta Shqipe
Porta Shqipe

Reputation: 866

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

Upvotes: 17

Rafa Llorente
Rafa Llorente

Reputation: 447

backgroundColor: "00000000" worked for me.

Upvotes: 5

maxjakob
maxjakob

Reputation: 1905

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.

Upvotes: 174

Related Questions