Plotly/Dash graph showing some elements of previous figure after replacing the figure (through dash callback)

Hi,
I am encountering an unusual issue in plotly/dash figure. When I use the dash callback to replace the figure with new data (candlestick and scatter line plots with secondary y s) I am getting candlesticks from previous figure in the new figure. I am not able to resolve this issue.

I was using an older version of Dash and Plotly (Dash 1.2 and Plotly 4.4). I tried updating them to latest version but still no luck.

In the image, I get some big candlesticks from the previous figure. Does anyone have any idea how to resolve this?

Would you mind sharing the snippet where you create the figure and the callback to update it?

Sure



# DISPLAY IV Graph and OPTION CHAIN-------------------------------------------------------------------
@app.app.callback(
    [
        Output("r_iv_graph_iv_candlestick", "figure"),
    ],
    [Input("r_iv_dropdown_symbol", "value"), Input("r_iv_radioitems_expiry", "value"),],
)
def r_iv_show_figure_and_dtable(dd_symbol, expiry):

    try:
        # refresh all variables so erratic graph does not show
        figure_iv_candlestick = go.Figure(data=[go.Scatter(x=[], y=[])])
        figure_iv_candlestick.update_layout(template="plotly_dark")

        figure_iv_candlestick.data = []
        figure_iv_candlestick.layout = {}

        df_iv = pd.DataFrame()
        df_candlestick = pd.DataFrame()
        df_total = pd.DataFrame()

        candlestick = None
        spot_implied_volatility = None
        historical_volatility = None

        # START ACTUAL CODE
        df_iv = crud.get_db_schema_table(
            app.connection_db_analysis, "volatility", (dd_symbol + "_volatility")
        )
        df_iv["date"] = pd.to_datetime(df_iv["date"])
        df_iv["date"] = df_iv["date"].dt.date

        df_candlestick = dm.load_table_db_historical(
            app.connection_db_historical,
            df_iv["date"].min(),
            datetime.date.today(),
            dd_symbol,
            "dly",
            "NSE",
        )
        df_candlestick["date"] = df_candlestick["date"].dt.date

        df_total = pd.merge(df_iv, df_candlestick, on="date", how="outer")
        df_total.sort_values("date", inplace=True)
        df_total.reset_index(drop=True, inplace=True)

        # get traces
        candlestick = fem.Plotter(data=df_total, current_tf="dly").plotCandlestick()

        spot_implied_volatility = fem.Plotter(
            data=df_total
        ).plot_spot_implied_volatility()

        historical_volatility = fem.Plotter(data=df_total).plot_historical_volatility()

        figure_iv_candlestick = make_subplots(
            shared_xaxes=True,
            vertical_spacing=0,
            rows=1,
            cols=1,
            specs=[[{"secondary_y": True}]],
            figure=None,
        )

        figure_iv_candlestick.add_traces(
            data=[spot_implied_volatility, historical_volatility, candlestick],
            secondary_ys=[False, False, True],
            rows=[1, 1, 1],
            cols=[1, 1, 1],
        )

        figure_iv_candlestick.update_yaxes(
            title_text=("Historical Data"),
            secondary_y=True,
            title_font=dict(size=20),
            row=1,
            col=1,
        )

        figure_iv_candlestick.update_yaxes(
            title_text=("Volatility - Implied and Historical"),
            secondary_y=False,
            title_font=dict(size=20),
            row=1,
            col=1,
        )

        figure_iv_candlestick.update_layout(
            height=600,
            margin=dict(t=20, l=0, r=0, b=0),
            autosize=True,
            template="plotly_dark",
            hovermode="x",
            showlegend=True,
            dragmode="zoom",
            legend=dict(
                yanchor="bottom",
                y=1,
                xanchor="left",
                x=0,
                orientation="h",
                itemclick="toggleothers",
                itemdoubleclick="toggle",
            ),
            xaxis=dict(
                showgrid=False, showticklabels=True, rangeslider_visible=False,
            ),  # Removes Y-axis grid lines
            yaxis=dict(showgrid=False,),  # Removes Y-axis grid lines
        )

    except Exception as e:

        print("Error: show iv_candlestick graph", e)

        figure_iv_candlestick = go.Figure(data=[go.Scatter(x=[], y=[])])
        figure_iv_candlestick.update_layout(template="plotly_dark")

    finally:

        return (
            figure_iv_candlestick,
        )


I have bunch of my own code from local libraries. But the general code for the figure from dash call back is here. I have tried creating empty figure and removing its data and layout to ensure a clean start. but still the problem persists.

Also, Code for plotting traces is as follows:

def plotCandlestick(self):
        chart = go.Candlestick(
            x=list(self.data["date"]),
            open=list(self.data["open"]),
            high=list(self.data["high"]),
            low=list(self.data["low"]),
            close=list(self.data["close"]),
            name="Candlestick",
            visible=True,
        )
        return chart

def plot_spot_implied_volatility(self):
        chart = go.Scatter(
            x=list(self.data["date"]),
            y=list(self.data["spot_implied_volatility"]),
            line=dict(color="gold", width=2.0),
            name="Implied Volatility",
        )
        return chart

    # HISTORICAL VOLATILITY ---------------------------------------------------------------------------------------------
    def plot_historical_volatility(self):
        chart = go.Scatter(
            x=list(self.data["date"]),
            y=list(self.data["historical_volatility"]),
            line=dict(color="silver", width=1.5),
            name="Historical Volatility",
            # visible="legendonly",
        )
        return chart

Thank you!

Looking though you code, everything seems as it should… It is such a hard problem to reproduce, so unfortunately I won’t be of much help… You can try to take a look at candlestick and figure_iv_candlestick on their dict form (Figure.to_dict()), it could be some weird problem with dates… or try to reproduce the error just with the candlestick, to see if it is something with make_subplots…

Sorry, I hope you’ll find someone more helpful on this issue. Good luck!

This sounds like a bug…

Resolved this issue today. The issue seemed to be to NA values in the pandas dataframe. This created erroneous candlestick data points in the plotly graph. I dropped the NA rows and the issue is resolved. Thanks for the help though.