Repository navigation
relayoutData fails with Candlestick plots #355
Copy link
Copy link
Closed
Description
I found what appears to be a bug with using relayoutData callbacks with Candlestick plots. A couple of things I noticed:
- If the candlestick plot isn't updated by an additional callback, relayoutData seems to work fine.
- relayoutData works correctly if the Candlestick figure is replaced by Scatter or a different plot style. As far as I can tell this is a bug related to Candlestick plots only.
What I'm working with:
dash_core_components ==0.28.0
dash_html_components== 0.11.0
dash== 0.26.2
plotly== 3.1.1
import pandas as pd
import numpy as np
import json
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import plotly
# Data to plot
# ------------------------------------------------------------------------------
candles = pd.DataFrame(np.random.randint(1,100, size = (100,4)),
columns = ['open', 'close', 'high', 'low'])
# App
# ------------------------------------------------------------------------------
app = dash.Dash()
serv = app.server
app.layout = \
html.Div([
html.Div([
html.Button('Reload', id='button')
]),
html.Div([
dcc.Graph(
id='candles_plot',
)
]),
html.Div([
dcc.Markdown("When Graph is updated by a callback, relayout doesn't work."),
html.Pre(id='relayout-data'),
], className='three columns'),
])
# Callbacks
#-------------------------------------------------------------------------------
@app.callback(
dash.dependencies.Output('candles_plot', 'figure'),
[dash.dependencies.Input('button', 'n_clicks')]
)
def update_plot(reload):
figure = {
'data':[
go.Candlestick(
x = candles.index,
open = candles.open,
high = candles.high,
close = candles.close,
low = candles.low
)
],
'layout':[
go.Layout(
xaxis = dict(
rangeslider = {'visible':False}
)
)
]
}
return figure
@app.callback(
Output('relayout-data', 'children'),
[Input('candles_plot', 'relayoutData')])
def display_selected_data(relayoutData):
return json.dumps(relayoutData, indent=2)
if __name__ == '__main__':
app.run_server(debug=True)Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels
Activity
rmarren1 commentedon Aug 28, 2018
I'm getting weird behavior with this example. It seems to work on the initial load of an app, then never again until you hard restart (ctrl+c and re-start) the app returning only
null.Works with
dash-core-components==0.22.0and not withdash-core-components==0.22.1, probably a bug introduced in plotly/dash-core-components#184 with the differential treatment ofcandlestickandohlclosing the layout information (https://github.com/plotly/dash-core-components/blob/de74f625e85ada15d01dbbdc780cda864f773a9b/src/components/Graph.react.js#L82-L88).I'm not too familiar with the
Plotlylibraries and how to fix this though, @chriddyp can you take a look?chriddyp commentedon Aug 28, 2018
Yeah, the first thing that we should do is get
candlestickto use the sameplotly.reactmethod as the other chart methods. That is, remove this logic:https://github.com/plotly/dash-core-components/blob/de74f625e85ada15d01dbbdc780cda864f773a9b/src/components/Graph.react.js#L80-L89and just call
Plotly.reacton it.We originally had
Plotly.newPlotbecause candlesticks in plotly.js weren't really first class and didn't work well with.react. However, they were revamped in april as part of plotly.js 1.36.0 (plotly/plotly.js#2561) and this logic was never changed.rmarren1 commentedon Aug 28, 2018
Okay that seems like an easy enough fix, I'll see if it works
chriddyp commentedon Aug 28, 2018
And if that doesn't, then it'd likely be an issue with plotly.js itself
chriddyp commentedon Aug 30, 2018
Did this end up fixing the issue?
rmarren1 commentedon Aug 31, 2018
Yeah, confirmed working with
dash-core-components==0.28.1👍ggiesa commentedon Aug 31, 2018
You guys are the best, thanks so much
Update all dependencies (plotly#355)
Update all dependencies (#355)