Annotations are not visible using plotly graph objects

Anvil Q&A
1

Hi
I am creating a plot using Plotly Graph Objects. I want to show an extra explanation text at the bottom left of the graph. But somehow I cannot get this text visible?

I tried following the tutorial on Anvil Docs | Plots but no annotations are shown. Any ideas?

self.plot_1.layout = { 'xaxis': {'visible':True, 'dtick': 1, 'range':[years_for_scatter[0]+0.5, years_for_scatter[-1]-0.5]}, 'yaxis': {'autorange':False, 'dtick': 0.2, 'range':[min(required_list)-0.5, max(required_list)+0.5]}, 'title': {"text": f"Required vs Attained {attained_value:.2f}"}, 'margin': {'l':20, 'r':20, 't':60, 'b':60}, }

self.plot_1.layout.annotations = [{'text':"ANNOTATION", 'x':0.014, 'xref':'paper', 'y':1.077, 'showarrow':True, 'textangle':0, 'align':'left', 'xanchor':0, 'yanchor':'bottom', 'xshift':1, 'yshift':-5, 'font':{'color':'black', 'size':15}}]

2

Hi @conny.soderholm

the example in the docs works as expected for me.

can you provide a clone link with the code that you’re trying
(ideally this would be a minimal example with just the plot, the data and the annotations)

the code snippet you’ve pasted isn’t enough for others to investigate.
(it’s only a partial snippet, and there’s some bits of code missing that mean I can’t just paste it into an anvil app and see if it works)

3

Thanks @stucork

Below is a clone link.

When I create a new blank app and copy paste the documentation code from Anvil Docs | Plots it works nicely, displaying the annotation. But when I use the same code in my existing app, it doesn’t work.

The clone link is a minimal example of the app I am working on.

4

The examples rely on setting and mutating the layout property before the plot is shown. (Inside the __init__)

But if the plot is already on the screen (as in your clone) then setting the layout forces the plot to update, and mutating the layout has no effect.

If in the final line you write self.plot_1.layout = self.plot_1.layout it’ll force the plot to rerender and it’ll work as expected.

Given this, it’s probably also better to create a temporary object layout= {}, update and mutate this and then in the final line do self.plot_1.layout = layout

You can also call self.plot_1.redraw() which will force the plot to redraw after mutating the layout.

2 Likes
5

Thanks @stucork! So simple when explained by you, thanks!

1 Like