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
If I modify html code and change annotation yref
to y2
then it works as expected.
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
Thanks a lot for your help
Edit for adding a while chart representation to focus over 2 y-axis information being displayed.
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
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
If I modify html code and change annotation yref
to y2
then it works as expected.
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
Thanks a lot for your help
Edit for adding a while chart representation to focus over 2 y-axis information being displayed.
- started by creating a figure with two yaxes
- I did find that
yref="y2"
is being ignored byadd_hrect()
- hence resolved by moving to
add_shape()
andadd_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