How to set annotation of hrect referenced to a secondary y axis

Question:

I’m using plotly to create some charts. I have 2 y axis available and I’m creating some horizontal rectangle referenced to a secondary y axis. Which is working fine, hrect is displayed where it has to be. But problem is that annotation linked to that hrect is not being referenced to that secondary axis. So I get a mess in representation.
This is how I define hrect

     fig.add_hrect(y0=current_quantile, y1=current_quantile, fillcolor="black",
                   annotation_position="bottom right", annotation_text="Current performance",
                   line_width=1, secondary_y=True)

And this is what I get

Annotation wrong location

If I modify html code and change annotation yref to y2 then it works as expected.

Annotation properly located

In my point of view this looks like a bug from plotly, if you are referring hrect to secondary axis, it has no sense that its annotation references to another axis. But I was wondering if there is some workaround which could allow me to fix this. I’ve tried to define annotate=dict(yref="y2") but no luck, the same with annotation_yref="y2"
According to official documentation, not sure if yref can be changed in hrect call
Annotation reference

Thanks a lot for your help

Edit for adding a while chart representation to focus over 2 y-axis information being displayed.

Left refers to number of items and second refers to timestamp

Asked By: Xaruman

||

Answers:

  • started by creating a figure with two yaxes
  • I did find that yref="y2" is being ignored by add_hrect()
  • hence resolved by moving to add_shape() and add_annotation()
import pandas as pd
import plotly.express as px
import numpy as np

r = np.random.RandomState(22)

df = pd.DataFrame(
    {
        "x": np.linspace(0, 100, 50),
        "y1": r.uniform(1, 10, 50),
        "y2": r.uniform(30, 50, 50),
    }
)

# create a figure with two yaxes
fig = (
    px.line(df, x="x", y=["y1", "y2"])
    .update_traces(yaxis="y2", selector={"name": "y2"})
    .update_layout(yaxis2={"side": "right", "range": [0, 50], "overlaying":"y"})
)

current_quantile = 25
# wrong place for text
# fig.add_hrect(
#     y0=current_quantile,
#     y1=current_quantile,
#     annotation_position="bottom right",
#     annotation_text="Current performance",
#     yref="y2",
#     xref="paper"
# )

# correct position for text
fig.add_shape(
    type="rect",
    yref="y2",
    xref="paper",
    y0=current_quantile,
    y1=current_quantile,
    x0=0,
    x1=1,
)
fig.add_annotation(
    yref="y2",
    xref="paper",
    y=current_quantile,
    yshift=10,
    x=1,
    text="Current performance",
    showarrow=False
)


fig

enter image description here

Answered By: Rob Raymond
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.