How to add interactive text to Plotly bar graph with slider?

Question

I'm looking to add in interactive text (like a KPI) to show a variable on a graph. Below is an example in the plotly docs on a scatterplot with a slider. I'd like to do this, but also add text at the top to say what the average population is at any given year and update accordingly. Ex: for slider at year 1952, the top of the graph would say 16950402. I would also like to keep this in plotly express.

I know I could just use a hover label for this, but I'd prefer to have some big text at the top of the graph.

Does anyone know how to do this? I know adding graph titles or annotations with variables is possible, but I don't know how to get it to update with the slider.

import plotly.express as px

df = px.data.gapminder()
text = df.groupby("year").pop.mean().round(0)
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country", 
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

fig["layout"].pop("updatemenus") # optional, drop animation buttons
fig.show()

Here is an example of my desired output, but I'd like the title/text to change with the slider:

This is a very nice questiion. I tried to update the title for every frame as I did here but despite the layout for every frame change this doesn't show. — rpanai
– rpanai, Commented Jun 25, 2020 at 22:02
@rpani That was amazingly helpful! For some reason, I was getting the error mentioned about it freezing if I played it more than once with the example I had here, but it's actually working flawlessly for my real data. Can you post the code on here so I can mark that as an official answer? Thanks again! — Kelsey
– Kelsey, Commented Jun 26, 2020 at 1:42

rpanai · Accepted Answer · 2020-06-26 01:56:33Z

2

I'm adding the code as requested on comments even if there are some possible bugs. Here the ideas is to play with the frames generated by px adding a title to each of them and setting redraw = True for each step in fig.layout.sliders[0].steps.

import plotly.express as px

df = px.data.gapminder()
text = df.groupby("year").pop.mean().astype(int).values

fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country", 
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])\
        .update_layout(
#                        title="Avg Population: {}".format(text[0]), 
                       title_x=0.5)


for i, frame in enumerate(fig.frames):
    frame.layout.title = "Avg Population: {}".format(text[i])
    
for step in fig.layout.sliders[0].steps:
    step["args"][1]["frame"]["redraw"] = True

fig.show()

answered Jun 26, 2020 at 1:56

rpanai

13.5k3 gold badges48 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vestland Over a year ago

Very nice! I struggled with this for quite a while but started leaning towards a conclusion that it wasn't possible. So thank you for yet another illuminating post!

Collectives™ on Stack Overflow

How to add interactive text to Plotly bar graph with slider?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related