Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 614
johneth Avatar asked Sep 14 '11 08:09

johneth


People also ask

How do you remove the background of a graph in Google Sheets?

Monday, July 8, 2019Double click on any chart to open the Chart editor and select the Customize tab. Under Chart style, you can select a border color or select “None” to remove the border.

How do you change the color of a chart on Google?

Set series colors To change the colors assigned to data series in a specific chart: Select that chart, then on the right, open the STYLE tab. In the Color by section, select Series order, Bar order, or Slice order, depending on the type of chart. Click a color box to set the color for each series.


2 Answers

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.

like image 151
maxjakob Avatar answered Oct 04 '22 09:10

maxjakob


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

like image 36
Porta Shqipe Avatar answered Oct 04 '22 11:10

Porta Shqipe