Linking timeline graph with Dash table

I am trying to use the hoverdata feature of the px.timeline graph and link it with the dash table in order to highlight the line on which my mouse cursor is hovering. Can someone please tell if I am missing something as I cannot see it working.

import dash
import dash_table
from dash.dependencies import Input, Output

import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame([
    dict(Task="Job A", Start='2009-01-01', Finish='2009-02-28', Resource="Alex"),
    dict(Task="Job A", Start='2009-02-28', Finish='2009-04-15', Resource="Max"),
    dict(Task="Job B", Start='2009-02-20', Finish='2009-05-30', Resource="Max")
])

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Task", color="Resource")
fig.update_yaxes(autorange="reversed") 

app.layout = html.Div(
    [
        html.H4(id="title"),
        html.Div(
            [
                dcc.Graph(
                    id="timeline",
                    figure=fig
                )
            ]
        ),
        html.Div(
            [
                dash_table.DataTable(
                    id="table",
                    columns=[{"name": i, "id": i, "type": 'text'} for i in df.columns],
                    data=df.to_dict("records"),
                    sort_action="native",
                )
            ]
        ),
    ]
)

@app.callback(    
    [
        Output("table", "data"),
        Output("table", "style_data_conditional"),
    ],
    [Input("timeline", "hoverData")],
)
def highlight(hoverData):    

    data = df.to_dict("records")
    selected_styles = []
    
    if hoverData:
        task_selected = []
        for point in hoverData['points']:
            task_selected.append(point['y'])           
       
        selected_styles = [{'if': {
                                'filter_query': '{Task} = tolook'
                            },            
                
                            'backgroundColor': '#FFFF00'}]
        
    return data, selected_styles

if __name__ == "__main__":
    app.run_server(debug=True, use_reloader=False)

1 post - 1 participant

Read full topic