CODEWITHSUNDEEP
pythonbrowserplotlyrenderingplotly-python
Robin
Robin

Reputation: 51

How to change the body background around plotly figure when rendered in browser?

I was wondering if anyone knows how to remove this white border in firefox (or also chrome, doesn't matter) when I render a Scatter3d plot with plotly (python) for the browser. I already tried changing the margin to 0 but that did no change to the border. It seems like this white border is created around the actual figure by plotly. Is there any way to change/remove this? It is a little annoying when everything is dark except for this very white border around the whole figure. When I change the paper background color, then the dark background switches to whatever color I choose, but the white border stays as it is.

Thanks a lot in advance!

enter image description here

Upvotes: 2

Views: 1334

Answers (2)

Hamzah Al-Qadasi
Hamzah Al-Qadasi

Reputation: 9796

I discovered an easier way to solve your problem. You can use JavaScript to change the color of the body of HTML file by using post_script attribute as follows:

import plotly.express as px

df = px.data.iris()

fig = px.scatter_3d(df, x='sepal_length', y='sepal_width', z='petal_width',color='petal_length')

fig.update_layout( paper_bgcolor='rgba(0,0,0,255)' )
 
js = '''document.body.style.backgroundColor = "#000"; ''' #<---- this is the JS code

fig.show(renderer="browser",post_script=[js])

enter image description here

Upvotes: 2

Robin
Robin

Reputation: 51

Thanks @Hamzah and @EricLavault for your help!

I managed to find a solution here: https://community.plotly.com/t/show-tell-plotly-graph-background-color-in-html-file-with-css-style/43223

For using it in Ubuntu I just had to replace the os.startfile(output_file) with webbrowser.open('file://' + os.path.realpath(output_file))

Now there's no white border anymore! Thanks a lot!

Upvotes: 1

Related Questions