Setting Background color to transparent in Plotly plots

Question

My python code creates a plotly bar plot, but the background is white in color. I want to change it into transparent color. Is that doable?

My Code:

import plotly.plotly as py
from plotly.graph_objs import *
py.sign_in('username', 'api_key')
data = Data([
Bar(
    x=['Sivaranjani S', 'Vijayalakshmi C', 'Rajeshwari S', 'Shanthi Priscilla', 'Pandiyaraj G', 'Kamatchi S', 'MohanaPriya', 'Madhumitha G', 'Franklin Alphones Raj J', 'Akfaris Almaas', 'Biswajit Champati', 'Priya R', 'Rekha Rajasekaran', 'Sarath Kumar B', 'Jegan L', 'Karthick A', 'Mahalakshmi S', 'Ragunathan V', 'Anu S', 'Ramkumar KS', 'Uthra R'],
    y=[1640, 1394, 1390, 1313, 2166, 1521, 1078, 1543, 780, 1202, 1505, 2028, 2032, 1769, 1238, 1491, 1477, 1329, 2038, 1339, 1458],
    text=['Scuti', 'Scuti', 'Cygni', 'Scorpii', 'Scuti', 'Pollux', 'Scorpii', 'Pollux', 'Scuti', 'Pollux', 'Scorpii', 'Scorpii', 'Scuti', 'Cygni', 'Scorpii', 'Scuti', 'Scuti', 'Pollux', 'Scuti', 'Pollux', 'Pollux'])])
plot_url = py.plot(data)

The graph looks like this:

enter image description here

etpinard · Accepted Answer · 2015-04-30 14:01:28Z

179

For a fully transparent plot, make sure to specify both the paper bgcolor and the plot's:

import plotly.plotly as py
from plotly.graph_objs import *
py.sign_in('', '')
data = Data([
    Bar(
        x=['Sivaranjani S', 'Vijayalakshmi C', 'Rajeshwari S', 'Shanthi Priscilla', 'Pandiyaraj G', 'Kamatchi S', 'MohanaPriya', 'Madhumitha G', 'Franklin Alphones Raj J', 'Akfaris Almaas', 'Biswajit Champati', 'Priya R', 'Rekha Rajasekaran', 'Sarath Kumar B', 'Jegan L', 'Karthick A', 'Mahalakshmi S', 'Ragunathan V', 'Anu S', 'Ramkumar KS', 'Uthra R'],
        y=[1640, 1394, 1390, 1313, 2166, 1521, 1078, 1543, 780, 1202, 1505, 2028, 2032, 1769, 1238, 1491, 1477, 1329, 2038, 1339, 1458],
        text=['Scuti', 'Scuti', 'Cygni', 'Scorpii', 'Scuti', 'Pollux', 'Scorpii', 'Pollux', 'Scuti', 'Pollux', 'Scorpii', 'Scorpii', 'Scuti', 'Cygni', 'Scorpii', 'Scuti', 'Scuti', 'Pollux', 'Scuti', 'Pollux', 'Pollux']
    )
])

layout = Layout(
    paper_bgcolor='rgba(0,0,0,0)',
    plot_bgcolor='rgba(0,0,0,0)'
)

fig = Figure(data=data, layout=layout)

plot_url = py.plot(fig, filename='transparent-background')

answered Apr 30, 2015 at 14:01

etpinard

5,0111 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jeffsama Over a year ago

Thanks! For those who want more options, here is the official documentation: plot.ly/python/reference/#layout

M. Mufti Over a year ago

Nice, actually it is the opacity parameter(equal to 0) in rgba that makes the background transparent.

rezan21 Over a year ago

You could also: fig.update_layout(height=300, paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)")

MarcinKonowalczyk Over a year ago

I'd recommend also adding modebar = dict(bgcolor='rgba(0, 0, 0, 0)') to make the modebar render nicely too.

Ricardo Burillo · Accepted Answer · 2015-04-30 13:40:14Z

15

You can use the a Layout to change its colours with the parameters bgcolour and opacity set to yours desires. You could do something like:

data = Data([Bar(... The same you already have...)])

layout = Layout(
    title='Your Title',
    (xaxis, yaxis, WHAT EVER YOU WANT TO SET)

    paper_bgcolor='rgb(233,233,233)', # set the background colour

)
fig = Figure(data=data, layout=layout)
py.plot(fig)

you can find some examples here

edited Apr 30, 2015 at 13:40

answered Apr 30, 2015 at 13:34

Ricardo Burillo

1,38611 silver badges14 bronze badges

Comments

DougR · Accepted Answer · 2023-10-23 13:18:53Z

7

The simplest way to apply the transparent settings to an existing Plotly figure is to:

fig.update_layout(
    {
        "paper_bgcolor": "rgba(0, 0, 0, 0)",
        "plot_bgcolor": "rgba(0, 0, 0, 0)",
    }
)

answered Oct 23, 2023 at 13:18

DougR

3,5491 gold badge34 silver badges36 bronze badges

1 Comment

tb. Over a year ago

Thanks doug this is exactly what I came looking for - super simple and straightforward makes it even better.

Collectives™ on Stack Overflow

Setting Background color to transparent in Plotly plots

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related