Lessons Learned
I have built a few Plotly charts (using Plotly Dash) and have learned a few tricks along the way. Reading the docs will get you part of the way there but trial and error is required to go all the way.
Let’s start
- You might need several traces
- You might need custom hover text
- You might need a larger font
- You might need several traces
- You might want to toggle trace visibility
- You might need a special format for on screen vs printing
- You might want need custom grid colors
- You might need annotations
- You might need buttons
- You might need to save the ‘live’ html chart
- You might need several traces
I attach excerpts from my Python code. Follow along and read the comments.
The Plotly dictionary style seems to vary just a bit. For example, in my code, compare marker statements with annotations statements.
Also, it is not obvious how to refer to all the style attributes.
Hence: trial and error.
Hope this helps.
Here are the online Plotly for Python docs; great examples are provided.
Screenshot
Live Link to the C2 App (to reference the live chart)
#
# PLOTLY DOCS
#
# read https://plotly.com/python/
#
#... SAMPLE TRACE
trace_bt = go.Scatter(
x=my_x[: save_my_count + 1],
y=my_y[: save_my_count + 1],
mode="lines+markers+text",
text=my_text_plate_governs,
# set a custom text for the hover
customdata=my_text_all_plates,
textposition="top left",
textfont=dict(size=14, color="black"),
opacity=1.0,
name="",
marker={"size": 12, "line": {"width": 1.5, "color": "#FF0000"}},
line={"width": 2.0, "color": "#000000"},
cliponaxis=False,
# set a custom text for the hover (see a few line up)
hovertemplate="Capacity: %{y}
Thickness: %{customdata}",
)
#... SAMPLE TRACE
trace_bt4 = go.Scatter(
x=[0, 0.25], # yes point at zero, then 0.25 (1st plate thickness)
y=[0, my_y[0]], # yes point at zero, then 0.25 capacity (1st plate thickness)
mode="lines+markers+text",
text="",
# set a custom text for the hover
customdata=["0", "0.25"],
opacity=0.2,
name="", # Zero extension line
marker={"symbol": "circle", "size": 8},
# 'line': {'width': 1.5, 'color': '#FF0000'}},
line={"width": 2.0, "color": "#000000", "dash": "dash"},
cliponaxis=False,
# set a custom text for the hover (see a few line up)
hovertemplate="Capacity: %{y}
Thickness: %{customdata}",
visible=True,
)
#...
#combine the traces in preparation for building the figure
data_wt = [trace_bt4, trace_bt, trace_bt3]
#... LAYOUT
layout_bt = go.Layout(
autosize=True,
margin=go.layout.Margin(l=50, r=50, t=50, b=50, pad=16),
paper_bgcolor="rgba(237, 237, 237, 0.1)",
plot_bgcolor="rgba(250, 240, 240, 0.3)",
showlegend=False,
xaxis={
"title": "Plate Thickness (inches)",
"gridcolor": "#C8D4E3",
"gridwidth": 1,
"range": [0, max_x + 0.1],
"visible": True,
},
yaxis={
"title": "Bolt Capacity (kips)",
"gridcolor": "#C8D4E3",
"gridwidth": 1,
"range": [0, max(my_y) * (1 + plotpadfactor / 2)],
"rangemode": "nonnegative",
"visible": True,
},
annotations=[
dict(
x=0.45,
y=0.05,
align="left",
font={"family": "Arial", "size": 6},
text="",
xref="paper",
yref="paper",
xanchor="left",
yanchor="top",
showarrow=False,
)
],
)
# build the figure
figure_bt = go.Figure(data=data_wt, layout=layout_bt)
#... FIGURE UPDATES
# small margin to 'fill up' graph horizontally
xmargin = 0.01
figure_bt.update_layout(xaxis=dict(range=[0, min(2, max_x + xmargin)]))
# set the hoverlabel look
figure_bt.update_layout(
hoverlabel=dict(
bgcolor="#FFFFE0",
font_size=18,
font=dict(color="black"),
bordercolor="#FF0000",
)
)
# Update layout to change grid colors
figure_bt.update_layout(
xaxis=dict(gridcolor="#E8E8E8"), # Change x-axis grid color
yaxis=dict(gridcolor="#696969"), # Change y-axis grid color
)
#... BUTTONS MIGHT BE USEFUL
# Add buttons
figure_bt.update_layout(
updatemenus=[
dict(
# type='buttons',
direction="down",
buttons=list(
[
dict(
label="On screen",
#
# there are several methods
# read https://plotly.com/python/custom-buttons/
#
method="relayout",
# if you wanted to toggle the visibility of certain traces (via the button)
# only the 1st trace is visible
# args=[{'visible': [True, False, False, False]}]
# set the grid colors to a light color for the screen
# no annotation in this view
# tricky, because even with no annotations,
# the arrow has to be explicily turned off
args=[
{
"annotations": [{"text": "", "showarrow": False}],
"xaxis.gridcolor": "#E8E8E8",
"yaxis.gridcolor": "#696969",
"plot_bgcolor": "rgba(250, 240, 240, 0.3)",
}
],
),
dict(
label="For printing",
#
# there are several methods
# read https://plotly.com/python/custom-buttons/
#
method="relayout",
# if you wanted to toggle the visibility of certain traces (via the button)
# only the 4th trace is visible
# args=[{'visible': [False, False, False, True]}]
# set the grid colors to a dark color for the paper printout
# turn on the annotations in this view
args=[
{
"annotations": [
{
"x": 0.03,
"y": 0.98,
"xref": "paper",
"yref": "paper",
"font": {
"family": "Arial",
"size": "8",
"color": "red",
},
"bgcolor": "white",
"bordercolor": "#b9A9A9",
"borderwidth": 1,
# no arrows for this large text box
"showarrow": False,
"text": annotation_text,
"xanchor": "left",
"yanchor": "top",
"align": "left",
}
],
"xaxis.gridcolor": "#DCDCDC",
"yaxis.gridcolor": "#A9A9A9",
"plot_bgcolor": "white",
}
],
),
]
),
),
]
),
# save a copy of the html for my blog
figure_bt.write_html("DASH/pages/C2 chart.html")
.svg)
