Custom Buttons in Julia
How to add custom buttons to update Plotly chart attributes in Julia.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.
Note: We are retiring documentation for R, MATLAB, Julia, and F# in November 2025. Learn more about this change here.
Methods
The updatemenu method determines which plotly.js function will be used to modify the chart. There are 4 possible methods:
"restyle": modify data or data attributes"relayout": modify layout attributes"update": modify data and layout attributes; combination of"restyle"and"relayout""animate": start or pause an animation)
Restyle Button
The "restyle" method should be used when modifying the data and data attributes of the graph.<br> Update One Data Attribute<br> This example demonstrates how to update a single data attribute: chart type with the "restyle" method.
using PlotlyJS, CSV, DataFrames, HTTP
# load dataset
df = CSV.File(
HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv").body
) |> DataFrame
# create figure
# Add surface trace
p = plot(surface(z=Matrix{Float64}(df), colorscale="Viridis"))
# Update plot sizing
relayout!(p,
width=800,
height=900,
autosize=false,
margin=attr(t=0, b=0, l=0, r=0),
template="plotly_white",
)
# Update 3D scene options
# fig.update_scenes(
# aspectratio=attr(x=1, y=1, z=0.7),
# aspectmode="manual"
# )
# Add dropdown
relayout!(p,
updatemenus=[
attr(
type = "buttons",
direction = "left",
buttons=[
attr(
args=["type", "surface"],
label="3D Surface",
method="restyle"
),
attr(
args=["type", "heatmap"],
label="Heatmap",
method="restyle"
)
],
pad=attr(r= 10, t=10),
showactive=true,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
# Add annotation
relayout!(p,
annotations=[
attr(text="Trace type:", showarrow=false,
x=0, y=1.08, yref="paper", align="left")
]
)
pUpdate Several Data Attributes<br> This example demonstrates how to update several data attributes: colorscale, colorscale direction, and line display with the "restyle" method.
using PlotlyJS, CSV, DataFrames, HTTP
# load dataset
df = CSV.File(
HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv").body
) |> DataFrame
# Create figure
# Add surface trace
p = plot(heatmap(z=Matrix{Float64}(df), colorscale="Viridis"))
# Update plot sizing
relayout!(p,
width=800,
height=900,
autosize=false,
margin=attr(t=100, b=0, l=0, r=0),
)
# # Update 3D scene options
# fig.update_scenes(
# aspectratio=attr(x=1, y=1, z=0.7),
# aspectmode="manual"
# )
# Add drowdowns
# button_layer_1_height = 1.08
button_layer_1_height = 1.12
button_layer_2_height = 1.065
relayout!(p,
updatemenus=[
attr(
buttons=[
attr(
args=["colorscale", "Viridis"],
label="Viridis",
method="restyle"
),
attr(
args=["colorscale", "Cividis"],
label="Cividis",
method="restyle"
),
attr(
args=["colorscale", "Blues"],
label="Blues",
method="restyle"
),
attr(
args=["colorscale", "Greens"],
label="Greens",
method="restyle"
),
],
type = "buttons",
direction="right",
pad=attr(r=10, t=10),
showactive=true,
x=0.1,
xanchor="left",
y=button_layer_1_height,
yanchor="top"
),
attr(
buttons=[
attr(
args=["reversescale", false],
label="False",
method="restyle"
),
attr(
args=["reversescale", true],
label="true",
method="restyle"
)
],
type = "buttons",
direction="right",
pad=attr(r=10, t=10),
showactive=true,
x=0.13,
xanchor="left",
y=button_layer_2_height,
yanchor="top"
),
attr(
buttons=[
attr(
args=[Dict("contours.showlines" => false, "type" => "contour")],
label="Hide lines",
method="restyle"
),
attr(
args=[Dict("contours.showlines" => true, "type" =>"contour")],
label="Show lines",
method="restyle"
),
],
type = "buttons",
direction="right",
pad=attr(r=10, t=10),
showactive=true,
x=0.5,
xanchor="left",
y=button_layer_2_height,
yanchor="top"
),
]
)
relayout!(p,
annotations=[
attr(text="colorscale", x=0, xref="paper", y=1.1, yref="paper",
align="left", showarrow=false),
attr(text="Reverse<br>Colorscale", x=0, xref="paper", y=1.06,
yref="paper", showarrow=false),
attr(text="Lines", x=0.47, xref="paper", y=1.045, yref="paper",
showarrow=false)
])
Relayout Button
The "relayout" method should be used when modifying the layout attributes of the graph.<br> Update One Layout Attribute<br> This example demonstrates how to update a layout attribute: chart type with the "relayout" method.
using PlotlyJS, Distributions
x0 = rand(Normal(2, 0.4), 400)
y0 = rand(Normal(2, 0.4), 400)
x1 = rand(Normal(3, 0.6), 600)
y1 = rand(Normal(6, 0.4), 400)
x2 = rand(Normal(4, 0.2), 200)
y2 = rand(Normal(4, 0.4), 200)
trace1 = scatter(x=x0, y=y0, mode="markers", marker_color="DarkOrange")
trace2 = scatter(x=x1, y=y1, mode="markers", marker_color="Crimson")
trace3 = scatter(x=x2, y=y2, mode="markers", marker_color="RebeccaPurple")
# Add buttons that add shapes
cluster0 = [attr(type="circle",
xref="x", yref="y",
x0=minimum(x0), y0=minimum(y0),
x1=maximum(x0), y1=maximum(y0),
line=attr(color="DarkOrange"))]
cluster1 = [attr(type="circle",
xref="x", yref="y",
x0=minimum(x1), y0=minimum(y1),
x1=maximum(x1), y1=maximum(y1),
line=attr(color="Crimson"))]
cluster2 = [attr(type="circle",
xref="x", yref="y",
x0=minimum(x2), y0=minimum(y2),
x1=maximum(x2), y1=maximum(y2),
line=attr(color="RebeccaPurple"))]
layout = Layout(
updatemenus=[
attr(
buttons=[
attr(label="None",
method="relayout",
args=["shapes", []]),
attr(label="Cluster 0",
method="relayout",
args=["shapes", cluster0]),
attr(label="Cluster 1",
method="relayout",
args=["shapes", cluster1]),
attr(label="Cluster 2",
method="relayout",
args=["shapes", cluster2]),
attr(label="All",
method="relayout",
args=["shapes", vcat(cluster0, cluster1, cluster2)])
],
)
],
title_text="Highlight Clusters",
showlegend=false
)
plot([trace1, trace2, trace3], layout)Update Button
The "update" method should be used when modifying the data and layout sections of the graph.<br> This example demonstrates how to update which traces are displayed while simultaneously updating layout attributes such as the chart title and annotations.
using PlotlyJS, CSV, DataFrames
df = CSV.File(
HTTP.get("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv").body
) |> DataFrame
x = range(1, stop=size(df)[1])
trace1 = scatter(
df,
x=x,
y=df[!, "AAPL.High"] ,
name="High",
line_color="#33CFA5"
)
trace2 = scatter(
df,
x=x,
y=repeat([mean(df[!, "AAPL.High"])], size(df)[1]),
name="High Average",
visible=false,
line=attr(color="#33CFA5", dash="dash")
)
trace3 = scatter(
df,
x=x,
y=df[!, "AAPL.Low"],
name="Low",
line_color="#F06A6A"
)
trace4 = scatter(
df,
x=x,
y=repeat([mean(df[!, "AAPL.Low"])], size(df)[1]),
name="Low Average",
visible=false,
line=attr(color="#F06A6A", dash="dash")
)
high_annotations = [attr(x="2016-03-01",
y=mean(df[:, "AAPL.High"]),
xref="x", yref="y",
text=string("High Average:<br> ", mean(df[:, "AAPL.High"])),
ax=0, ay=-40),
attr(x=argmax(df[!, "AAPL.High"]),
y=maximum(df[:, "AAPL.High"]),
xref="x", yref="y",
text=string("High Max:<br> ", maximum(df[:, "AAPL.High"])),
ax=0, ay=-40)]
low_annotations = [attr(x="2015-05-01",
y=mean(df[:, "AAPL.Low"]),
xref="x", yref="y",
text=string("Low Average:<br>", mean(df[:, "AAPL.Low"])),
ax=0, ay=40),
attr(x=argmin(df[!, "AAPL.High"]),
y=minimum(df[:, "AAPL.Low"]),
xref="x", yref="y",
text=string("Low Min:<br>", minimum(df[:, "AAPL.Low"])),
ax=0, ay=40)]
layout = Layout(
updatemenus=[
attr(
active=0,
buttons=[
attr(
label="None",
method="update",
args=[
attr(visible= [true, false, true, false]),
attr(title= "Yahoo",
annotations=[]
)
]
),
attr(label="High",
method="update",
args=[
attr(visible= [true, true, false, false]),
attr(
title= "Yahoo High",
annotations=high_annotations
)
]
),
attr(
label="Low",
method="update",
args=[
attr(visible= [false, false, true, true]),
attr(
title= "Yahoo Low",
annotations=low_annotations
)
]
),
attr(
label="Both",
method="update",
args=[
attr(visible=[true, true, true, true]),
attr(
title="Yahoo",
annotations=vcat(high_annotations, low_annotations)
)
]
),
],
)
])
plot([trace1, trace2, trace3, trace4], layout)Animate Button
Refer to our animation docs: https://plotly.com/julia/#animations for examples on how to use the animate method with Plotly buttons.
Reference
See https://plotly.com/julia/reference/layout/updatemenus/ for more information about updatemenu buttons.