Plotly.py graph_object updating Annotation with Slider

πŸ“Š Plotly Python
1

@nicolaskruchten @empet @Emmanuelle sorry that mentioning all of you as I am not sure who will ends up handling this post. Following an example in the forum, I am trying to add annotations to be updated with slider.

It shows the initial annotations correctly however it does not update with sliding the step. My code is attached below and let me know if I did anything wrong. As annotations is in the layout and I have used similar specification as title, but it does not work. Thanks for any feedback in advance.

import plotly.graph_objects as go
import numpy as np

# Create figure
fig = go.Figure()
annotations_dict=[]
# Add traces, one for each slider step
for step in np.arange(0, 2, 0.1):
    x_vec=np.arange(0, 1, 0.1)
    y_vec=np.sin(step * np.arange(0, 1, 0.1))
    fig.add_trace(
        go.Scatter(
            visible=False,
            line=dict(color="#00CED1", width=6),
            name="𝜈 = " + str(step),
            x=x_vec,
            y=y_vec))
    annotations=[]
    for n in range(len(y_vec)):
        record = go.layout.Annotation(
            text=str("{:0.2f}".format(y_vec[n])),
            y=y_vec[n],
            x=x_vec[n],
            yref="y1",
            xref="x1",
            font=dict(color='#484848', size=12),
            showarrow=False,
        ) 
        annotations.append(record)
        # print(record)
    annotations_dict.append(annotations)

# Make 10th trace visible
fig.data[10].visible = True

fig.update_layout(
    title="Frequency: Step-"+str(10),
    annotations=annotations_dict[10],
)

# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[
            {"visible": [False] * len(fig.data)}, # update for traces
            {"title": "Frequency: Step-"+str(i)},
            {"annotations": annotations_dict[i]},
            # {"annotations": [False] * len(annotations_dict)}, # update for layout 
        ],
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    # step["args"][2]["annotations"][i] = True # Toggle i'th annotation to "visible"
    steps.append(step)

sliders = [dict(
    active=10,
    currentvalue={"prefix": "Frequency: "},
    pad={"t": 50},
    steps=steps
)]

fig.update_layout(
    sliders=sliders
)

fig.show()
2

@DennisZ

Only a minor correction is needed in the block that defines the list steps. Namely you must define only two dicts in the list args: the first one modifies the fig.data and the second one the fig.layout (in your case the title and annotations:

# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[
            {"visible": [False] * len(fig.data)}, # update for traces
            {"title": "Frequency: Step-"+str(i),    
            "annotations": annotations_dict[i]},
            # {"annotations": [False] * len(annotations_dict)}, # update for layout 
        ],
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    # step["args"][2]["annotations"][i] = True # Toggle i'th annotation to "visible"
    steps.append(step)
3

@empet You are the light at the end of the tunnel and I cannot say enough how much I love you…

4

@empet Can plotly do something like google chart adding customized annotation as the following chart.
showing a text button and it will expand if hover on the text button? Let me know and a simple example will be perfect.

image

5

@DennisZ

I have never worked with Google charts. Looking at the posted image it’s not clear what you intend to do similarly with Plotly, to suggest a solution.

6

@empet Here is an example. To add some Letter Button to the chart and show customized text when clicking or hovering on the button. This is pretty useful when story telling a chart. Let me know your thoughts and thanks.

https://developers.google.com/chart/interactive/docs/gallery/annotatedtimeline
7

@DennisZ
Yes, it is possible. The button definition is similar to that of steps for slider.
Please read this notebook https://chart-studio.plotly.com/~empet/15608 and those at the links within it, for examples.

8

@empet I think there is a way to work around it using scatter plot with markers only then put the story telling text in the hover tool-lips. Then it should work, right?

9

I don’t understand your suggestion.