Hi, I am trying dcc.Tab and my users find this component really useful. Yet i find that the interactive graphing capability from below link is lost when the graph is put inside a dcc.tab.(first tab works but second tab onwards do not work.)
https://dash.plot.ly/interactive-graphing
To be more specific, if we have multiple tabs where each tab with an interactive graph plus its relevant callbacks, only the first tab works fine while for the remaining tabs, the callbacks(for click, hover, etc…) do not receive any data when we hover/click on the charts.
I have a sample test code below, where i have 2 tabs. The second tab has the same graph+callback from the link but do not work.
Thanks!
Sample code:
import json
from textwrap import dedent as d
import plotly.graph_objs as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(name)
styles = {
‘pre’: {
‘border’: ‘thin lightgrey solid’,
‘overflowX’: ‘scroll’
}
}
data=[]
for i in range(3):
trace = go.Bar(
y=[‘a’,‘b’,‘c’],
x=[2+i,4*i,3-i],
name=‘item{}’.format(i),
orientation = ‘h’,
hoverinfo=‘all’,
)
data.append(trace)
layout = go.Layout(
xaxis=dict(
title=‘percentage’, # adhoc
),
barmode=‘group’,
autosize=False,
#width=500,
)
fig = go.Figure(data=data, layout=layout)
app.layout = html.Div([
dcc.Tabs(id=“tabs”, children=[
dcc.Tab(label=‘chart_1’, children=[
html.Div(className=‘row’, children=[
dcc.Graph(
id=‘basic-interactions_0’,
figure=fig
)
]),
]),
dcc.Tab(label='chart_2', children=[
html.Div(className='row', children=[
dcc.Graph(
id='basic-interactions',
figure=fig
)]),
html.Div(className='row', children=[
html.Div([
dcc.Markdown(d("""
**Hover Data**
Mouse over values in the graph.
""")),
html.Pre(id='hover-data', style=styles['pre'])
], className='three columns'),
html.Div([
dcc.Markdown(d("""
**Click Data**
Click on points in the graph.
""")),
html.Pre(id='click-data', style=styles['pre']),
], className='three columns'),
html.Div([
dcc.Markdown(d("""
**Selection Data**
Choose the lasso or rectangle tool in the graph's menu
bar and then select points in the graph.
""")),
html.Pre(id='selected-data', style=styles['pre']),
], className='three columns'),
html.Div([
dcc.Markdown(d("""
**Zoom and Relayout Data**
Click and drag on the graph to zoom or click on the zoom
buttons in the graph's menu bar.
Clicking on legend items will also fire
this event.
""")),
html.Pre(id='relayout-data', style=styles['pre']),
], className='three columns')
]),
])
])
])
@app.callback(
Output(‘hover-data’, ‘children’),
[Input(‘basic-interactions’, ‘hoverData’)])
def display_hover_data(hoverData):
print(‘enter hover callback’)
print(hoverData)
return json.dumps(hoverData, indent=2)
@app.callback(
Output(‘click-data’, ‘children’),
[Input(‘basic-interactions’, ‘clickData’)])
def display_click_data(clickData):
return json.dumps(clickData, indent=2)
@app.callback(
Output(‘selected-data’, ‘children’),
[Input(‘basic-interactions’, ‘selectedData’)])
def display_selected_data(selectedData):
return json.dumps(selectedData, indent=2)
@app.callback(
Output(‘relayout-data’, ‘children’),
[Input(‘basic-interactions’, ‘relayoutData’)])
def display_selected_data(relayoutData):
return json.dumps(relayoutData, indent=2)
if name == ‘main’:
app.run_server(debug=True, host=‘0.0.0.0’, port=8048)