---
jupyter:
jupytext:
notebook_metadata_filter: all
text_representation:
extension: .md
format_name: markdown
format_version: '1.1'
jupytext_version: 1.1.7
kernelspec:
display_name: Python 3
language: python
name: python3
language_info:
codemirror_mode:
name: ipython
version: 3
file_extension: .py
mimetype: text/x-python
name: python
nbconvert_exporter: python
pygments_lexer: ipython3
version: 3.7.2
plotly:
description: How to add custom buttons to update Plotly chart attributes in Python.
display_as: controls
language: python
layout: base
name: Custom Buttons
order: 1
page_type: example_index
permalink: python/custom-buttons/
thumbnail: thumbnail/custom-buttons.jpg
---
#### Methods
The [updatemenu method](https://plot.ly/python/reference/#layout-updatemenus-buttons-method) determines which [plotly.js function](https://plot.ly/javascript/plotlyjs-function-reference/) 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
- `"animate"`: start or pause an [animation](https://plot.ly/python/#animations))
#### Restyle Button
The `"restyle"` method should be used when modifying the data and data attributes of the graph.
**Update One Data Attribute**
This example demonstrates how to update a single data attribute: chart `type` with the `"restyle"` method.
```python
import plotly.graph_objects as go
import pandas as pd
# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")
# create figure
fig = go.Figure()
# Add surface trace
fig.add_trace(go.Surface(z=df.values.tolist(), colorscale="Viridis"))
# Update plot sizing
fig.update_layout(
width=800,
height=900,
autosize=False,
margin=dict(t=0, b=0, l=0, r=0),
template="plotly_white",
)
# Update 3D scene options
fig.update_scenes(
aspectratio=dict(x=1, y=1, z=0.7),
aspectmode="manual"
)
# Add dropdown
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
type = "buttons",
direction = "left",
buttons=list([
dict(
args=["type", "surface"],
label="3D Surface",
method="restyle"
),
dict(
args=["type", "heatmap"],
label="Heatmap",
method="restyle"
)
]),
pad={"r": 10, "t": 10},
showactive=True,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
# Add annotation
fig.update_layout(
annotations=[
go.layout.Annotation(text="Trace type:", showarrow=False,
x=0, y=1.08, yref="paper", align="left")
]
)
fig.show()
```
**Update Several Data Attributes**
This example demonstrates how to update several data attributes: colorscale, colorscale direction, and line display with the "restyle" method.
This example uses the cmocean python package. You can install this package with `pip install cmocean`.
```python
import plotly.graph_objects as go
import pandas as pd
# load dataset
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/volcano.csv")
# Create figure
fig = go.Figure()
# Add surface trace
fig.add_trace(go.Heatmap(z=df.values.tolist(), colorscale="Viridis"))
# Update plot sizing
fig.update_layout(
width=800,
height=900,
autosize=False,
margin=dict(t=100, b=0, l=0, r=0),
)
# Update 3D scene options
fig.update_scenes(
aspectratio=dict(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
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
buttons=list([
dict(
args=["colorscale", "Viridis"],
label="Viridis",
method="restyle"
),
dict(
args=["colorscale", "Cividis"],
label="Cividis",
method="restyle"
),
dict(
args=["colorscale", "Blues"],
label="Blues",
method="restyle"
),
dict(
args=["colorscale", "Greens"],
label="Greens",
method="restyle"
),
]),
type = "buttons",
direction="right",
pad={"r": 10, "t": 10},
showactive=True,
x=0.1,
xanchor="left",
y=button_layer_1_height,
yanchor="top"
),
go.layout.Updatemenu(
buttons=list([
dict(
args=["reversescale", False],
label="False",
method="restyle"
),
dict(
args=["reversescale", True],
label="True",
method="restyle"
)
]),
type = "buttons",
direction="right",
pad={"r": 10, "t": 10},
showactive=True,
x=0.13,
xanchor="left",
y=button_layer_2_height,
yanchor="top"
),
go.layout.Updatemenu(
buttons=list([
dict(
args=[{"contours.showlines": False, "type": "contour"}],
label="Hide lines",
method="restyle"
),
dict(
args=[{"contours.showlines": True, "type": "contour"}],
label="Show lines",
method="restyle"
),
]),
type = "buttons",
direction="right",
pad={"r": 10, "t": 10},
showactive=True,
x=0.5,
xanchor="left",
y=button_layer_2_height,
yanchor="top"
),
]
)
fig.update_layout(
annotations=[
go.layout.Annotation(text="colorscale", x=0, xref="paper", y=1.1, yref="paper",
align="left", showarrow=False),
go.layout.Annotation(text="Reverse
Colorscale", x=0, xref="paper", y=1.06,
yref="paper", showarrow=False),
go.layout.Annotation(text="Lines", x=0.47, xref="paper", y=1.045, yref="paper",
showarrow=False)
])
fig.show()
```
#### Relayout Button
The `"relayout"` method should be used when modifying the layout attributes of the graph.
**Update One Layout Attribute**
This example demonstrates how to update a layout attribute: chart `type` with the `"relayout"` method.
```python
import plotly.graph_objects as go
# Generate dataset
import numpy as np
np.random.seed(1)
x0 = np.random.normal(2, 0.4, 400)
y0 = np.random.normal(2, 0.4, 400)
x1 = np.random.normal(3, 0.6, 600)
y1 = np.random.normal(6, 0.4, 400)
x2 = np.random.normal(4, 0.2, 200)
y2 = np.random.normal(4, 0.4, 200)
# Create figure
fig = go.Figure()
# Add traces
fig.add_trace(
go.Scatter(
x=x0,
y=y0,
mode="markers",
marker=dict(color="DarkOrange")
)
)
fig.add_trace(
go.Scatter(
x=x1,
y=y1,
mode="markers",
marker=dict(color="Crimson")
)
)
fig.add_trace(
go.Scatter(
x=x2,
y=y2,
mode="markers",
marker=dict(color="RebeccaPurple")
)
)
# Add buttons that add shapes
cluster0 = [go.layout.Shape(type="circle",
xref="x", yref="y",
x0=min(x0), y0=min(y0),
x1=max(x0), y1=max(y0),
line=dict(color="DarkOrange"))]
cluster1 = [go.layout.Shape(type="circle",
xref="x", yref="y",
x0=min(x1), y0=min(y1),
x1=max(x1), y1=max(y1),
line=dict(color="Crimson"))]
cluster2 = [go.layout.Shape(type="circle",
xref="x", yref="y",
x0=min(x2), y0=min(y2),
x1=max(x2), y1=max(y2),
line=dict(color="RebeccaPurple"))]
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
type="buttons",
buttons=[
dict(label="None",
method="relayout",
args=["shapes", []]),
dict(label="Cluster 0",
method="relayout",
args=["shapes", cluster0]),
dict(label="Cluster 1",
method="relayout",
args=["shapes", cluster1]),
dict(label="Cluster 2",
method="relayout",
args=["shapes", cluster2]),
dict(label="All",
method="relayout",
args=["shapes", cluster0 + cluster1 + cluster2])
],
)
]
)
# Update remaining layout properties
fig.update_layout(
title_text="Highlight Clusters",
showlegend=False,
)
fig.show()
```
#### Update Button
The `"update"` method should be used when modifying the data and layout sections of the graph.
This example demonstrates how to update which traces are displayed while simulaneously updating layout attributes such as the chart title and annotations.
```python
import plotly.graph_objects as go
import pandas as pd
# Load dataset
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]
# Initialize figure
fig = go.Figure()
# Add Traces
fig.add_trace(
go.Scatter(x=list(df.index),
y=list(df.High),
name="High",
line=dict(color="#33CFA5")))
fig.add_trace(
go.Scatter(x=list(df.index),
y=[df.High.mean()] * len(df.index),
name="High Average",
visible=False,
line=dict(color="#33CFA5", dash="dash")))
fig.add_trace(
go.Scatter(x=list(df.index),
y=list(df.Low),
name="Low",
line=dict(color="#F06A6A")))
fig.add_trace(
go.Scatter(x=list(df.index),
y=[df.Low.mean()] * len(df.index),
name="Low Average",
visible=False,
line=dict(color="#F06A6A", dash="dash")))
# Add Annotations and Buttons
high_annotations = [dict(x="2016-03-01",
y=df.High.mean(),
xref="x", yref="y",
text="High Average:
%.2f" % df.High.mean(),
ax=0, ay=-40),
dict(x=df.High.idxmax(),
y=df.High.max(),
xref="x", yref="y",
text="High Max:
%.2f" % df.High.max(),
ax=0, ay=-40)]
low_annotations = [dict(x="2015-05-01",
y=df.Low.mean(),
xref="x", yref="y",
text="Low Average:
%.2f" % df.Low.mean(),
ax=-40, ay=40),
dict(x=df.High.idxmin(),
y=df.Low.min(),
xref="x", yref="y",
text="Low Min:
%.2f" % df.Low.min(),
ax=0, ay=40)]
fig.update_layout(
updatemenus=[
go.layout.Updatemenu(
type="buttons",
direction="right",
active=0,
x=0.57,
y=1.2,
buttons=list([
dict(label="None",
method="update",
args=[{"visible": [True, False, True, False]},
{"title": "Yahoo",
"annotations": []}]),
dict(label="High",
method="update",
args=[{"visible": [True, True, False, False]},
{"title": "Yahoo High",
"annotations": high_annotations}]),
dict(label="Low",
method="update",
args=[{"visible": [False, False, True, True]},
{"title": "Yahoo Low",
"annotations": low_annotations}]),
dict(label="Both",
method="update",
args=[{"visible": [True, True, True, True]},
{"title": "Yahoo",
"annotations": high_annotations + low_annotations}]),
]),
)
])
# Set title
fig.update_layout(
title_text="Yahoo",
xaxis_domain=[0.05, 1.0]
)
fig.show()
```
#### Animate Button
Refer to our animation docs: https://plot.ly/python/#animations for examples on how to use the `animate` method with Plotly buttons.
#### Reference
See https://plot.ly/python/reference/#layout-updatemenus for more information about `updatemenu` buttons.