Style Plotly Plots#
This guide addresses how to style Plotly plots displayed using the Plotly pane.
Plotly provides a list of built in templates in plotly.io.templates
. See the Plotly Templates Guide.
The gif below displays an example of what can be achieved with a little styling of the Plotly plot and the FastListTemplate
.
A Plotly Express plot with a custom theme and accent color#
In this example we will give the Plotly Express plot a dark theme and a custom accent color.
import pandas as pd
import plotly.express as px
import plotly.io as pio
import panel as pn
pn.extension("plotly")
data = pd.DataFrame(
[
("Monday", 7),
("Tuesday", 4),
("Wednesday", 9),
("Thursday", 4),
("Friday", 4),
("Saturday", 4),
("Sunday", 4),
],
columns=["Day", "Orders"],
)
def plot(template, color):
fig = px.line(
data,
x="Day",
y="Orders",
template=template,
color_discrete_sequence=(color,),
title=f"Template: {template}",
)
fig.update_traces(mode="lines+markers", marker=dict(size=10), line=dict(width=4))
fig.layout.autosize = True
return fig
templates = sorted(pio.templates)
template = pn.widgets.Select(value="plotly_dark", options=templates, name="Template")
color = pn.widgets.ColorPicker(value="#F08080", name="Color")
pn.Column(
pn.Row(template, color),
pn.pane.Plotly(pn.bind(plot, template, color), sizing_mode="stretch_width"),
"**Plotly Templates**: " + ", ".join(templates),
).servable()
A Plotly go.Figure
plot with dark theme#
In this example we will give the Plotly go.Figure
plot a dark theme.
import pandas as pd
import plotly.graph_objects as go
import panel as pn
pn.extension("plotly")
TEMPLATE = "plotly_dark" # "ggplot2", "seaborn", "simple_white", "plotly", "plotly_white", "plotly_dark", "presentation", "xgridoff", "ygridoff", "gridon", "none"
z_data = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv")
fig = go.Figure(
data=go.Surface(z=z_data.values),
layout=go.Layout(
title="Mt Bruno Elevation",
))
fig.layout.autosize = True
fig.update_layout(template=TEMPLATE, title=f"Mt Bruno Elevation in a '{TEMPLATE}' template")
pn.pane.Plotly(fig, height=500, sizing_mode="stretch_width").servable()