CODEWITHSUNDEEP
pythonplotly-dash
Stephan Claus
Stephan Claus

Reputation: 475

Change colors in python dash plotly theme

I am currently creating my first plotly dash app and have a question on graph theming:

I want to use the available plotly_dark theme and only adjust the underlying colors (background and element colors) to custom values. I played around with the ideas provided here: https://plotly.com/python/templates/#saving-and-distributing-custom-themes like this

import plotly.graph_objects as go
import plotly.io as pio

pio.templates["plotly_dark_custom"] = go.layout.Template(
    ...custom definitions here...
)
pio.templates.default = "plotly_dark_custom"

but I was wondering if there is a more intuitive way, e.g. building a child theme from plotly_dark and only override the colors (providing a palette for the colors and define the new background color) afterwards.

As I am very new to Python my knowledge here is very limited, so I hope you can give me some pointers in the right direction.

Thank you and let me know if I should provide more details on this request. Stephan

Upvotes: 13

Views: 24003

Answers (4)

yash
yash

Reputation: 380

apparently plotly manages to override the existing template settings(only the ones that are being specified) when you change them using the update_layout() method.

fig.update_layout(
    plot_bgcolor='rgb(17,17,17)',
    paper_bgcolor ='rgb(10,10,10)')

I just did that and it does the job, no point in accessing the template :)

Upvotes: 6

drlee
drlee

Reputation: 91

This solution is pretty clean IMO:

import plotly.io as pio
import plotly.graph_objects as go

pio.templates['custom'] = go.layout.Template(
    layout_paper_bgcolor='rgba(0,0,0,0)',
    layout_plot_bgcolor='rgba(0,0,0,0)'
    )
pio.templates.default = 'plotly+custom'

Upvotes: 2

bodily11
bodily11

Reputation: 604

I got an error when running Stephan's answer, so I thought I would post what ended up working for me.

# this helps us get the theme settings
import plotly.io as plt_io

# this is for simple plotting with plotly express
import plotly.express as px

# create our custom_dark theme from the plotly_dark template
plt_io.templates["custom_dark"] = plt_io.templates["plotly_dark"]

# set the paper_bgcolor and the plot_bgcolor to a new color
plt_io.templates["custom_dark"]['layout']['paper_bgcolor'] = '#30404D'
plt_io.templates["custom_dark"]['layout']['plot_bgcolor'] = '#30404D'

# you may also want to change gridline colors if you are modifying background
plt_io.templates['custom_dark']['layout']['yaxis']['gridcolor'] = '#4f687d'
plt_io.templates['custom_dark']['layout']['xaxis']['gridcolor'] = '#4f687d'

# load an example dataset to test
df = px.data.iris()

# create a nice default plotly example figure
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
                 size='petal_length', hover_data=['petal_width'])

# set the template to our custom_dark template
fig.layout.template = 'custom_dark'

# and voila, we have a modified dark mode figure
fig.show()

Upvotes: 5

Stephan Claus
Stephan Claus

Reputation: 475

in case this is helpful for others here a way I managed to get what I want:

  1. Get the settings from plotly_dark (you only needs to do this once)
  2. set custom template to plotly dark
  3. update custom template based on your needs given the output from 1.
import plotly.graph_objects as go
import plotly.io as pio

plotly_template = pio.templates["plotly_dark"]
print (plotly_template)

pio.templates["plotly_dark_custom"] = pio.templates["plotly_dark"]

pio.templates["plotly_dark_custom"].update({
#e.g. you want to change the background to transparent
'paper_bgcolor': 'rgba(0,0,0,0)',
'plot_bgcolor': 'rgba(0,0,0,0)'
})

Most likely not the most elegant solution, but it does the trick. Stephan

Upvotes: 5

Related Questions