React bug with Candlestick

[nicolaskruchten]

Let's investigate this: https://community.plotly.com/t/overlapping-old-new-data/37123

@archmoj you'll probably have to whip up a CodePen for this yourself as this user is not a Plotly.js user directly :)

[nicolaskruchten]

I tried to replicate this in a simple Pen but couldn't... https://codepen.io/nicolaskruchten/pen/zYvabwX

[archmoj]

Should we close this one?

[nicolaskruchten]

Let's try to replicate it still.

[AdamDorwart]

I've been able to replicate this issue in Python. It looks like it only happens to Candlestick and not OHLC for me. After launching that dash application click the start date selector and choose a date a week in the future.

plotly==4.12.0
dash==1.17.0

from datetime import datetime

import pandas as pd

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

df = pd.read_pickle("https://raw.githubusercontent.com/AdamDorwart/plotly_canddlestick_bug/main/appl_bug.pkl")

start_date = df.index.min()
end_date = df.index.max()

def get_figure(df, start_date, end_date):
    mask = (df.index >= start_date) & (df.index <= end_date)
    df_filt = df[mask]

    data = go.Candlestick(x=df_filt.index,
                    open=df_filt['Open'],
                    high=df_filt['High'],
                    low=df_filt['Low'],
                    close=df_filt['Close'])
    
    return go.Figure(data=data)

app = dash.Dash()
app.layout = html.Div([
    dcc.DatePickerRange(
        id="ohlc-dates",
        start_date=start_date,
        end_date=end_date,
        display_format='M-D-Y',
    ),
    dcc.Graph(
        id="ohlc", 
        figure=get_figure(df, start_date, end_date),
    )
])

@app.callback(
    Output("ohlc", "figure"),
    [Input("ohlc-dates", "start_date"),
    Input("ohlc-dates", "end_date")]
)
def update_dates(start_date, end_date):
    global df
    return get_figure(df, start_date, end_date)

app.run_server(debug=True)

Here's a small repository that hosts the data and source: https://github.com/AdamDorwart/plotly_canddlestick_bug

[AdamDorwart]

@nicolaskruchten @archmoj

Is the above sufficient to replicate the issue? Just curious if this is getting planned in.

[michaelbabyn]

here is a codepen that reproduces the issue https://codepen.io/michaelbabyn/pen/LYyNXjJ. It looks like the candlesticks that don't get removed correspond to the null values in the new trace

[archmoj]

Thanks @michaelbabyn for the codepen.
Would you please fork the pen and then try to make it as minimal as possible?
Having a minimal pen can help identify & solve the problem.

[michaelbabyn]

sure, https://codepen.io/michaelbabyn/pen/oNWxJrz

[archmoj]

sure, https://codepen.io/michaelbabyn/pen/oNWxJrz

Thanks very much @michaelbabyn.
This is now clear!