10000 [BUG] Candlestick chart is not cleared properly when updated with callback · Issue #5316 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

[BUG] Candlestick chart is not cleared properly when updated with callback #5316

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
vemikhaylov opened this issue Dec 4, 2020 · 6 comments
Closed

[BUG] Candlestick chart is not cleared properly when updated with callback #5316

vemikhaylov opened this issue Dec 4, 2020 · 6 comments
Labels
bug something broken

Comments

@vemikhaylov
Copy link

Describe your context
Please provide us your environment so we can easily reproduce the issue.

  • replace the result of pip list | grep dash below
dash                 1.17.0
dash-core-components 1.13.0
dash-html-components 1.1.1
dash-renderer        1.8.3
dash-table           4.11.0

  • if frontend related, tell us your Browser, Version and OS

    • OS: macOS Mojave 10.14.5
    • Browser: Safari (12.1.1); Chrome (87.0.4280.88)

Describe the bug

During updating with callback Candlestick charts for different time intervals (e.g. 1 minutes, 10 minutes, 1 hour), selected with radio button, the previous traces are not cleared. The same thing works as expected for the Ohlc chart type.

from datetime import datetime

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output

GRAPH_ID = "example-graph"
AGGREGATION_RADIOITEMS_ID = "aggregation-radioitems"

AGGREGATION_1M = "1min"
AGGREGATION_10M = "10min"
AGGREGATION_1H = "1H"


def main() -> None:
    app = _build_app()
    app.run_server()


def _build_app() -> dash.Dash:
    app = dash.Dash(__name__)
    app.layout = _build_layout()
    _register_callbacks(app)

    return app


def _register_callbacks(app: dash.Dash) -> None:
    app.callback(Output(GRAPH_ID, "figure"), [Input(AGGREGATION_RADIOITEMS_ID, "value")])(_build_figure_callback)


def _build_figure_callback(aggregation: str) -> go.Figure:
    df = _get_data()
    df = _aggregate_data(df, aggregation)
    candlestick_chart = _build_candlestick_chart(df)
    figure = go.Figure(data=[candlestick_chart])

    return figure


def _build_layout() -> html.Div:
    return html.Div(
        [dcc.Graph(id=GRAPH_ID, responsive=True, style={"height": "65vh"}), _build_aggregation_radioitems()]
    )


def _build_candlestick_chart(df: pd.DataFrame) -> go.Candlestick:
    return go.Candlestick(x=df.datetime, open=df.open, close=df.close, low=df.low, high=df.high)


def _build_aggregation_radioitems() -> dcc.RadioItems:
    return dcc.RadioItems(
        id=AGGREGATION_RADIOITEMS_ID,
        options=[
            {"label": "1min", "value": AGGREGATION_1M},
            {"label": "10min", "value": AGGREGATION_10M},
            {"label": "1h", "value": AGGREGATION_1H},
        ],
        value=AGGREGATION_1M,
    )


def _get_data() -> pd.DataFrame:
    return pd.DataFrame(
        [
            (datetime(2020, 12, 4, 0), 90.0, 110.0, 80.0, 120.0),
            (datetime(2020, 12, 4, 1), 91.0, 111.0, 81.0, 121.0),
            (datetime(2020, 12, 4, 2), 92.0, 112.0, 82.0, 122.0),
            (datetime(2020, 12, 4, 3), 93.0, 113.0, 83.0, 123.0),
            (datetime(2020, 12, 4, 4), 94.0, 114.0, 84.0, 124.0),
        ],
        columns=(["datetime", "open", "close", "low", "high"]),
    )


def _aggregate_data(df: pd.DataFrame, aggregation: str) -> pd.DataFrame:
    if df.empty:
        return df
    groups = df.groupby(pd.Grouper(key="datetime", freq=aggregation))
    result_df = groups.agg({"open": "first", "close": "last", "high": "max", "low": "min"})
    result_df = result_df.reset_index()

    return result_df


if __name__ == "__main__":
    main()

Expected behavior

The graph is fully updated after the callback call.

Screenshots

candlestick_chart_not_cleared
@chriddyp chriddyp transferred this issue from plotly/dash Dec 4, 2020
@khubull
Copy link
khubull commented Nov 8, 2021

Hello, I am having this same issue with the some parts of the previous candlestick trace still visible after updating the fig through a callback. Was this resolved?

@khubull
Copy link
khubull commented Nov 8, 2021

@vemikhaylov did you ever find a workaround to this issue?

@tariusagi
Copy link
tariusagi commented Jul 7, 2023 •
edited by Coding-with-Adam
Loading

At the moment, July 2023, I'm still having this issue, too. Has anyone found a solution yet?

plotly 5.14.1
plotly-resampler 0.8.3.2
dash 2.9.3
dash-bootstrap-components 1.4.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0

@Coding-with-Adam
Copy link
Contributor

Thank you for your patience @tariusagi . We aim to tackle this issue in September.
Making note of a work-around solution posted on the forum.

@alexcjohnson
Copy link
Collaborator

@archmoj is this also fixed by #6757, like #4729 is?

@archmoj
Copy link
Contributor
archmoj commented Oct 26, 2023

Fixed by #6757.

@archmoj archmoj closed this as completed Oct 26, 2023
@archmoj archmoj added the bug something broken label Oct 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@alexcjohnson @Coding-with-Adam @archmoj @vemikhaylov @tariusagi @khubull
0