First element of annotation list not displayed on subplots

📊 Plotly Python
1

Hi,

I’m working on creating biplots using annotations and subplots. I have several biplots on the same figure and to draw the vectors of each variables I build a list of dictionnary of annotations inspired on this topic https://stackoverflow.com/questions/41402256/how-do-i-annotate-each-subplot-separately-in-plotly-python

Everything works fine but some annotations are not displayed (they don’t even exist if I inspect the html of the output) whereas in the list I pass as parameters in the update_layout they do exist (the first 14 elements). And I don’t see what am I doing wrong…

Here are the elements of the list I pass as parameter in :

biPlot.update_layout(
    autosize=False,
    width=1500,
    height = 1300,        
    annotations = list_arrows,
    paper_bgcolor = 'rgba(0,0,0,0)',
    plot_bgcolor = 'rgba(0,0,0,0)',
)

and which are not diplayed.

[layout.Annotation({
    'arrowcolor': 'rgb(31, 119, 180)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': 0.854,
    'xref': 'x',
    'y': 0.0,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(255, 127, 14)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': -0.187,
    'xref': 'x',
    'y': -0.768,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(44, 160, 44)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': 0.232,
    'xref': 'x',
    'y': 0.425,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(214, 39, 40)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': 0.918,
    'xref': 'x',
    'y': 0.397,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(148, 103, 189)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': 0.899,
    'xref': 'x',
    'y': 0.287,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(140, 86, 75)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': -0.74,
    'xref': 'x',
    'y': 0.655,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(227, 119, 194)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': -0.514,
    'xref': 'x',
    'y': 0.557,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(127, 127, 127)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x',
    'ay': 0,
    'ayref': 'y',
    'showarrow': True,
    'text': '',
    'x': -0.889,
    'xref': 'x',
    'y': 0.105,
    'yref': 'y'
}), layout.Annotation({
    'arrowcolor': 'rgb(31, 119, 180)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': -0.81,
    'xref': 'x2',
    'y': -0.492,
    'yref': 'y2'
}), layout.Annotation({
    'arrowcolor': 'rgb(255, 127, 14)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': -0.864,
    'xref': 'x2',
    'y': 0.097,
    'yref': 'y2'
}), layout.Annotation({
    'arrowcolor': 'rgb(44, 160, 44)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': -0.067,
    'xref': 'x2',
    'y': -0.955,
    'yref': 'y2'
}), layout.Annotation({
    'arrowcolor': 'rgb(214, 39, 40)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': -0.798,
    'xref': 'x2',
    'y': 0.383,
    'yref': 'y2'
}), layout.Annotation({
    'arrowcolor': 'rgb(148, 103, 189)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': -0.768,
    'xref': 'x2',
    'y': 0.191,
    'yref': 'y2'
}), layout.Annotation({
    'arrowcolor': 'rgb(140, 86, 75)',
    'arrowhead': 3,
    'arrowwidth': 1.5,
    'ax': 0,
    'axref': 'x2',
    'ay': 0,
    'ayref': 'y2',
    'showarrow': True,
    'text': '',
    'x': 0.826,
    'xref': 'x2',
    'y': -0.344,
    'yref': 'y2'
})

And here is a picture of the result :

biPlot
biPlot1365×892 72.5 KB

As you can see, the annotations are not displayed in the first two subplot, whereas the result should look like the other subplots.

Thanks in advance for your help !

2

i had exactly the same issue and successfully makes it work in a simple but really weird way … by doubling the list …:

annotations = list_arrows *2,

I have no clue why it’s working

1 Like
3

I was facing the same problem and this solved it. Thanks!
Team Plotly should look into it!