✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Graph clickdata callback on tabbed app not firing correctly

Hello -

I’m having trouble consistently firing callback from graph click events when I have a tabbed application with a graph on each page. When the below site loads, clicking on the first tabs’ chart will fire an event. However the second tab’s callback won’t fire after switching to the second chart and clicking the graph. Additionally, then returning to the first tab, and re-clicking on the graph, the previously working call back no longer fires as well.

import dash
import dash_core_components as dcc
import dash_html_components as html

import pandas as pd
import numpy as np

app = dash.Dash('test')
server = app.server

app.scripts.config.serve_locally = True

data = pd.DataFrame(np.random.randint(0,10,(100,2)), columns = ['data1','data2'])

def update_chart(*input_data):
    figure = {'data':
                    [{
                        'x': data.index,
                        'y': data['data1'],  # .values.tolist(),
                        'customdata': "",#,"[name] * len(to_plot.index),
                        'type': 'scatter',
                        'mode': 'lines',
                        'line': {'width': 1},
                        'showlegend': True,
                        'name': 'test_data'
                    }]
        ,
              'layout': {
                  'margin': {'b': 30, 'r': 30, 'l': 30, 't': 30},
                  #'legend': {'x': 0},
                  'xaxis': {'fixedrange': True},
                  'yaxis': {'fixedrange': True, 'hoverformat': '.4f'},
                  'animate': True ,
                  'hovermode': 'closest',
                 # 'legend': dict(x=-.4, y=1)
              }}

    return figure


app.layout = html.Div(
    [dcc.Tabs(id="tabs", children=[
        dcc.Tab(id ="one", children = [
            dcc.Graph(id = 'graphone', figure = update_chart()),
            dcc.Input(id = 'inputone')
        ]),

        dcc.Tab(id = "two", children = [
            dcc.Graph (id = 'graphtwo', figure=update_chart()),
            dcc.Input(id='inputtwo')
        ])

    ])])


@app.callback(dash.dependencies.Output('inputone', 'value'),
              [dash.dependencies.Input('graphone', 'clickData')])
def clicktab1(*input_data):
    print('click tab 1')
    print(input_data)
    return 0


@app.callback(dash.dependencies.Output('inputtwo', 'value'),
              [dash.dependencies.Input('graphtwo', 'clickData')])
def clicktab2(*input_data):
    print('click tab 2')
    print(input_data)
    return 0


if __name__ == '__main__':
    app.run_server(port=8049, debug=False)

We’re working on a fix here: https://github.com/plotly/dash-renderer/pull/101

I am experiencing the same with my multi-tab app. Clicking on tab 1 stores data in a hidden div; clicking on tab 2 or tab 3 displays a graph using that data; but then clicking on tab 3, 2, or 1 and the graph results disappear.