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.)?
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With