How to update rangeslider when extendTrace api using?

plotly.js
1

Hi,

How can I make the rangeSlider shows all in real-time charting?
it shows only one dot in my example.

that is what I’m trying:

Thank you.

2

Thanks for the report.

There are a few bugs in our range slider at the moment that will we fix in the next few weeks.

I’d recommend subscribing to https://github.com/plotly/plotly.js/issues/686 for the latest development info.

3

Thank you for your reply Etienne.
Ok I will. Thank you again.

4

Hey @etienne,
I know this is resolved but I am facing a very similar issue.

I am using https://dash.plotly.com/dash-core-components/graph extendData to update a graph with on relayout.
Unfortunately, the rangeslider will always be empty even though the chart updates properly.

grafik
grafik2457×349 6.76 KB

df = pd.DataFrame({"x": x, "y": y})
df["x"] = pd.to_datetime(df["x"])


def figure():
    data = df.iloc[initial_start_x:initial_end_x]
    fig = go.Figure(data=go.Scattergl(x=[], y=[], mode="lines"))
    fig.update_layout(clickmode="event")
    fig.update_yaxes(fixedrange=True)
    fig.update_layout(xaxis=dict(rangeslider=dict(visible=True)))
    return fig


app.layout = html.Div(
    children=[
        dcc.Store(id="store"),
        dcc.Graph(
            id="graph", figure=figure(), animate=True, config=dict(scrollZoom=True)
        ),
    ]
)

@app.callback(
    [Output("graph", "extendData"), Output("store", "data")],
    [Input("graph", "relayoutData")],
    [State("store", "data")]
)
def relayout_figure(relayoutData, store):
    fig_data = dash.no_update
    store_data = dash.no_update

    if not store:
        initial_fig_data = df.iloc[initial_start_x:initial_end_x]
        x = initial_fig_data["x"]
        y = initial_fig_data["y"]

        fig_data = dict(x=[x], y=[y])
        store_data = {"x": max(x)}
    elif (
        relayoutData
        and "xaxis.range[0]" in relayoutData
        and "xaxis.range[1]" in relayoutData
    ):
        x_start = relayoutData["xaxis.range[0]"]
        x_end = relayoutData["xaxis.range[1]"]
        print(f"{x_start} - {x_end}")
        new_fig_data = get_data_in_timeframe(x_start, x_end)

        last_x = store["x"]

        x = new_fig_data["x"]
        y = new_fig_data["y"]

        # deduplicate
        mask = x > last_x
        x = x[mask]
        y = y[mask]

        fig_data = dict(x=[x], y=[y])

        if not x.empty:
            store_data = {"x": max(x)}

    return fig_data, store_data

Thank you.