Manually draw straight line in chart

Dash Python
1

I have a simplified version of my program below. Is there a way for me to manually draw a straight line in the Dash chart? No need to be able to save it.

import dash
from dash.dependencies import Output, Input
from dash import dcc
from dash import html
import plotly.graph_objects as go

x_time=["09:31:00", "09:32:00", "09:33:00", "09:34:00", "09:35:00"]
y1=[6.385030,6.468024,6.526419,6.640735,6.722588]
y2=[6.293187,6.341455,6.381316,6.449572,6.506755]

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Graph(style={'height': '100vh'}, id = 'live-graph', animate = False),
        dcc.Interval(
            id = 'graph-update',
            interval = 1000,
            n_intervals = 0
        ),
    ]
)

@app.callback(Output('live-graph', 'figure'),
              Input('graph-update', 'n_intervals'))
def update_graph_scatter(n):
    fig = go.Figure(go.Scatter(x=x_time, y=y1, mode='lines', name='y1', line=dict(color="#ff0000")))
    fig.add_trace(go.Scatter(x=x_time,   y=y2, mode='lines', name='y2', line=dict(color="#00ff00")))
    fig.update_layout(uirevision=True) 
    return fig

if __name__ == '__main__':
    app.run_server()
2

Hi,

Just to clarify, by “manually draw” do you mean using the pointer in the application to draw the line or draw a line “via code” with coordinates that you define (say, in a callback)?

3

With manually draw I’m think about using the mouse pointer, e.g., placing the mouse pointer where I would like to have the straight line start then press e.g. Ctrl key and move the mouse to the straight line end point and then release the Ctrl key.