repeated callback alters Candlestick/OHLC data

[bcdunbar]

When candlestick and ohlc chart types are repeatedly updated, data is wrongly transformed.

For example,

(1) select AAPL from dropdown
(2) select AAPL again and data transforms
(3) select AAPL again and data transforms again
(4) ... so on

Run below script and repeatedly select ticker options.

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

import pandas as pd
import pandas_datareader as web

app = dash.Dash()

df_a = web.DataReader("AAPL", 'morningstar').reset_index()
df_t = web.DataReader("TSLA", 'morningstar').reset_index()
df = pd.concat([df_a,df_t])

app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Dropdown(
                id='input',
                options=[{'label': i, 'value': i} for i in df['Symbol'].unique()],
                value='AAPL'
            )
        ], style={'width': '100px'}),

        dcc.Graph(id='graph')
])

@app.callback(Output('graph', 'figure'),
[Input('input', 'value')])
def update_candle(value):
    symbol = str(value)
    df2 = df[df['Symbol'] == symbol]
    figure = {
        'data': [{
            'x': df2['Date'],
            'open': df2['Open'],
            'high': df2['High'],
            'low': df2['Low'],
            'close': df2['Close'],
            'type': 'candlestick',
            'name': symbol
        }]
    }
    return figure

app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})

if __name__ == '__main__':
    app.run_server()

I'm facing a similar issue, except the main difference is that I have a "Next" button that's designed to let me iterate bar-by-bar through some market data. I have the data loaded into a database, and i'm iterating through the documents/rows of the dbase one-by-one and trying to display. I'm using plotly.graph_objs.Candlestick. I'm also using collections.queue to limit the number of candlesticks I want to display.

I'm basically seeing the same exact issue as you when I click "Next". But I did observe that if I click "Autoscale" then it fixes everything and I get exactly what I wanted. I've search all over the web and played with both the Graph.animate and Layout.autorange settings. But nothing seems to automatically "Autoscale" the Grape.

I'm wondering if you click "Autoscale" (upper right hand corner) does that solve the issue for you? If so, then I'm wondering if there's some sort of Autoscale bug here?

[chriddyp]

Fixed by plotly/dash-core-components#184, upgrade with:

pip install dash-core-components==0.22.1