71

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

johneth
  • 2,858
  • 5
  • 27
  • 26

5 Answers5

173

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.

Community
  • 1
  • 1
maxjakob
  • 1,895
  • 1
  • 12
  • 7
  • 5
    That's indeed a lack of documentation I think. Worked great for me ! – Pierre de LESPINAY Feb 14 '12 at 15:34
  • If anyone has found this whilst looking for advice regarding Google **Image** Charts then Image Charts can be made transparent by the background colour alpha component being 00. e.g. chf=bg,s,654321**00** – BrantApps Jun 28 '12 at 20:54
  • 2015, march, still working of course. Just a tip : if you want partial transparency, you have to add a class, say "white_transparent" to your chart id, with a background-color:rgba(255,255,255,); This way, the graph is totally transparent, but an underlying layer is partially transparent.
    – michauko Mar 11 '15 at 09:23
  • @MacMac Works for me. You need to put it in var options = { } before you draw the visualization. – Tucker Jan 02 '16 at 07:27
  • @Tucker Maybe it does not work for Line Charts? I've done both by passing a var or the object of options itself. – MacMac Jan 04 '16 at 11:07
  • @MacMac I'm actually testing line charts now. I'll let you know if it works there too. I was having a little difficulty putting two different charts on one page. – Tucker Jan 06 '16 at 17:33
  • @MacMac Okay. I think you're right. I looked into it. When the SVG is drawn, there's an attribute called 'rect', in it fill="white". I've been trying to override this setting somehow, but the API is a little confusing. The solution below by Jonas Littau to replace the element using jScript seems like the best way to go, but I haven't been able to get it to work. – Tucker Jan 07 '16 at 03:56
17

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

Porta Shqipe
  • 766
  • 7
  • 8
5

backgroundColor: "00000000" worked for me.

Rafa Llorente
  • 447
  • 2
  • 8
  • 18
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.

Diogo Cid
  • 3,764
  • 1
  • 20
  • 25
Jonas Littau
  • 167
  • 2
  • 10
1

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.

Zach Simons
  • 21
  • 1