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!

4

After one year, this still is a problem? The first two annotation elements of the list are not showing. Solved by adding two empty annotations at the beginning…

Did someone find another solution to this?

This is my code:

def update_figure(selected_rule):
        fig = plot_rules_plotly(rules, preds, baselines, weights, max_rulelen,
                                other_preds, preds_distr, b_box_pred, round_digits)
        
        print(f"Selected rule: {selected_rule}")
        print(f"Rules for selected: {rules[selected_rule]}")
        print(f"Predictions for selected: {preds[selected_rule]}")

        # Update annotations
        annotations = []
        annotations.append(None) # weird fix
        annotations.append(None) # weird fix
        for j, r in enumerate(rules[selected_rule]):
            print(f"Adding annotation for rule {j}: {r}, on coordinate ({preds[selected_rule][j]}, {j})")
            annotations.append(dict(
                x=(preds[selected_rule][j] + preds[selected_rule][j-1])/2, # place the rule in the middle of the path
                y=j + 0.5,
                text=parse(r),
                showarrow=False,
                xanchor='center',
                visible=True,
                bgcolor='rgba(255, 255, 255, 0.8)'  # background color
            ))

        # Add baseline annotation
        annotations.append(dict(
            x=baselines[selected_rule], 
            y=-0.5,
            text=f"Baseline<br>{baselines[selected_rule]:.{round_digits}f}",
            showarrow=False, 
            yanchor='top', 
            visible=True,
            bgcolor='rgba(255, 255, 255, 0.8)'  # background color
        ))

        # Add final prediction annotation
        annotations.append(dict(
            x=preds[selected_rule][-1], 
            y=len(rules[selected_rule]) + 0.5,
            text=f"Prediction<br>{preds[selected_rule][-1]:.{round_digits}f}",
            showarrow=False, 
            yanchor='bottom', 
            visible=True,
            bgcolor='rgba(255, 255, 255, 0.8)'  # background color
        ))

        print(f"++ Annotations ++\n {annotations}")
        print(preds[selected_rule][-1])
        print(len(rules[selected_rule]))

        # todo: weird problem with the first two annotations not being displayed

        print(annotations[0], annotations[1])
        fig.update_layout(annotations=annotations)

        return fig