Hi Plotly/Dash Community,
I have a dash app which has a Dcc.graph candlestick chart, along with some circle shapes.
When I use the parameters xsizemode=“pixel” and ysizemode=“pixel” to make the circle shape a fixed pixel width, (and hence setting xanchor and yanchor to determine where the center of the circle is placed, alongsize x0, x1, y0, and y0 to set the size of the pixel width) , I notice that while the circle is initially correctly drawn on graph load, when the circle is made editable=True and then click and dragged in the chart, the circle disappears!
From looking at the figure parameter of the chart, specifically figure.layout.shapes, it seems when you move the circle, it changes x0 and x1 (horizontal pixel size) to a new and strange value , when it should really be changing xanchor (date centering point). Changing x0 and x1 makes sense when xsizemode=“scale”, and x0 and x1 determine the circles absolute horizontal reference points for the left and right side of the circle, but not when xsizemode is set to “pixel”. Wondering if this a bug? Note the x0 and x1 seem to change to some 1970-01-01 epoch timestamp plus a few minutes. y0 also seems to change, from 0 to a negative number, I am not sure why (please see attached two before and after screenshots of the figure)
My code is below, I tried to reduce it as much as I could, but I use dash to display my charts so do not use the figure.show() method, but I have added it below, hopefully it works. Perhaps this is plotly problem or it could be dash. In my own code, I run this figure from a simple dcc.Graph(id=“backtesting_graph”, style={“height”: 1000}).
full_daterange = pd.date_range(start="2021-09-01", end="2021-09-30", freq="1D")
figure = go.Figure(go.Candlestick(
x=full_daterange,
open=[1 for date in full_daterange],
high=[1.5 for date in full_daterange],
low=[0.5 for date in full_daterange],
close=[0.75 for date in full_daterange],
))
figure.add_shape(type="circle",
xref="x", yref="y",
fillcolor="PaleTurquoise",
x0=0,
x1=25,
y0=0,
y1=25,
xsizemode="pixel",
xanchor = pd.to_datetime(full_daterange[5]),
ysizemode="pixel",
yanchor = 1,
line_color="LightSeaGreen",
editable=True,
name="Entry Circle",
)
figure.show()
Thanks
Marcus
Figure extract before moving the circle
Figure extract after moving the circle, note changes in X0, X1, Y0 , when I expect changes in xanchor and yanchor instead, yet neither xanchor nor yanchor change
