dcc.Graph hoverData not working when graph is embedded inside tabs?

[chriddyp]

I haven't looked into this yet, but this was reported by the community this week: https://community.plot.ly/t/interactive-graphing-not-working-with-dcc-tab/13852

[valentijnnieman]

Sorry for the delay, but I can confirm that hoverData is not working when a Graph is embedded in Tabs, using the no-callback method. Here's the example from the community forms:

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',
    }
}

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)


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

[valentijnnieman]

I'm hopeful https://github.com/plotly/dash-renderer/pull/101 will resolve this issue too.

[rahul188]

can anyone please help me with how to add hover data in DCC.graph, please?

[joel314]

Hi,

I am using dash_renderer 1.9.0 and it looks like the problem is still there.

Is there any update on this issue? Is there any workaround?

Thanks for your input!

[joel314]

I figured out that the issue was caused by this piece of CSS code that I put in the assets folder:

body {
  zoom: 70%;
}

For some reason, it prevented the graphs to be interactive anymore in the tabs.

See: https://github.com/plotly/plotly.js/issues/5288

[ipendlet]

FWIW the example @valentijnnieman appears to work now.