Draw lines by hand or using some tool in plotly chart

The following five lines draws a chart using plotly:

import plotly.graph_objects as go
x_time=["09:31:00", "09:32:00", "09:33:00", "09:34:00", "09:35:00", "09:36:00", "09:37:00", "09:38:00", "09:39:00", "09:40:00"]
fig = go.Figure(go.Scatter(x=x_time, y=y1, mode='lines', name='y1', line=dict(color="#ff0000")))

When looking at the chart in a web browser I would like to draw a straigth line using the mouse to see how well I can connect the lows in that uptrend to form a trendline. How can I do that? If using a tool that automatically tries to find the best trendline for me I might want to manually adjust it afterwards if I know some data points have less value. Thanks a lot for any suggestions!

HI @robin1 welcome to the forums!

You can use a builtin function for that:

serch on this page for Drawing shapes with a Mouse on Cartesian plots

1 Like

Thank you very much, fantastic, seems to work!
Do you also know if it is possible to copy/paste e.g. a line that has been drawn so that you get two identical lines with the same angle so that you can move the other line to see how a possible trend channel would look like?

Hi @robin1, thatโ€™s unfortunately not possible. If you are open to use Dash, itโ€™s perfectly achievable.

Absolutely, I am also using Dash when plotting data realtime! Can you please give me a hint how to do this in Dash?

Hi @robin1,

The shapes (in your case the line) are stored in a list of the figure.layout.

  • Fisrt thing to do, would be extractiong the shape information.
  • Second step would be creating the new shape based on your needs and add this new shape to the list.
  • third step would be updating the figure

I have some apps in my github dealing with shapes, this one for example:

Itโ€™s a bit different than what you want to do, but the basic principle is the same.

In this example I create annotations on mouse click: