Plot x value after a mouse click in Plotly

Question

I would like to create a candle simulator where the next value is plotted after an event (mouse click or timer).

Instead of showing the whole plot, unshadow the next value on demand (aka append a new value).

1. The interactive plotly graph allows to interact with different plots.

2. Interactive mouse click gives the coordinates of the mouse position. this is not the desired result

I tried to update the graph adding next value and plot.show() again, which creates a new graph (windows).

This should work with any graph, but giving an ohlc with ema indicator as an example:

import plotly.graph_objects as go
import pandas as pd
import plotly.express as px

df2 =df(0) 
fig = go.Figure()  
fig.add_trace(go.Ohlc(x=df2.index, open=df2['Open'], high=df2['High'], low=df2['Low'], close=df2['Close'],name='plot1'))
fig.add_trace(go.Scatter(x=df2.index, y=df2['ema13'],opacity=0.7, line=dict(color='blue', width=2),name='plot2'))
fig.update_layout(xaxis_rangeslider_visible=False)
fig.show()
for i in len(df):
    input("Press enter to continue")
    df2.append(df(i))
    fig.update_traces(x=df2.index, open=df2['Open'], high=df2['High'], low=df2['Low'], close=df2['Close'],name='plot1')
    fig.update_traces(x=df2.index, y=df2['ema13'],opacity=0.7, line=dict(color='blue', width=2),name='plot2')
    fig.show()'

Answer 1

You mention that you tried updating the graph. To improve the question, please share a minimal reproducible example (including dummy data), so we can evaluate how much additional info you need.

The solution lies in defining an update event and change fig.data. Connect this function to either an onclick on Python, or a timer. This code starts with the first datapoint. Then you need to click on the graph (any datapoint) to add the next.

import plotly.graph_objects as go
import pandas as pd

fig = go.FigureWidget()

ix_max = 1

df = pd.DataFrame({'x':[1, 2, 3], 'y':[10, 11, 12]})

fig.add_trace(go.Scatter(x=df['x'][:ix_max],
                         y=df['y'][:ix_max],
                         name='trace1'))

def update_graph(trace, points, state):

    global ix_max

    ix_max += 1

    with fig.batch_update():

        fig.update_traces(
            x=df['x'][:ix_max],
            y=df['y'][:ix_max],
            selector=dict(name='trace1'))  # this changes x and y of the trace named here. Otherwise all traces are affected

# This next part makes sure it works regardless of which trace is on top
for i in range(len(fig.data)):
    f = fig.data[i]
    f.on_click(update_graph)

fig