Use plotly.js in client side callback

Dash Python
1

Hello,

I’d like to update my figure content with client side callback. The main issue is that I don’t know how to create the figure object i client side. This is what I don currently in the callback with python to update the fig object:

trace_a=[]
trace_v=[]
trace1 = go.Scattergl(
        x=x,
        y=y,
        name=value,
        mode='lines',
        showlegend=True,
    )
traces_v.append(trace1)

trace1 = go.Scattergl(
        x=x,
        y=y,
        name=value,
        mode='lines',
        showlegend=True,
    )
traces_v.append(trace1)

n_rows=2
fig = plsubs.make_subplots(rows=2, cols=1,shared_xaxes=True,vertical_spacing=0.1);
for trace1 in traces_v:
    fig.add_trace(trace1, row=1, col=1)
fig.update_xaxes(range=xaxis_range, row=1, col=1)

fig.update_yaxes(title_text='1', row=1, col=1,showspikes=True,spikemode="across+marker")
for trace1 in traces_v:
    fig.add_trace(trace1, row=2, col=1)
fig.update_yaxes(title_text='2', row=2, col=1,showspikes=True,spikemode="across+marker")
fig.update_xaxes(range=xaxis_range, row=2, col=1)

fig.update_layout(  
                height=650, 
                title='',
                template='plotly_white',
                margin={'t': 30, 'b':30},
                shapes=shapes,
                annotations=[
                    go.layout.Annotation(
                        x=0,
                        y=0,
                        xref="x",
                        yref="paper",
                        text='annotation',
                        showarrow=True,
                        arrowhead=7,
                        ax=0,
                        ay=0.5
                    )
                ],
                showlegend= True,)
1 Like