relayoutData fails with Candlestick plots

[ggiesa]

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)

[rmarren1]

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.0 and not with dash-core-components==0.22.1, probably a bug introduced in plotly/dash-core-components#184 with the differential treatment of candlestick and ohlc losing 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 Plotly libraries and how to fix this though, @chriddyp can you take a look?

[chriddyp]

Yeah, the first thing that we should do is get candlestick to use the same plotly.react method 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-L89
and just call Plotly.react on it.

We originally had Plotly.newPlot because 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]

Okay that seems like an easy enough fix, I'll see if it works

[chriddyp]

And if that doesn't, then it'd likely be an issue with plotly.js itself

[chriddyp]

Did this end up fixing the issue?

[rmarren1]

Yeah, confirmed working with dash-core-components==0.28.1 👍

[ggiesa]

You guys are the best, thanks so much