How to display data on click on a graph?

Dash Python
1

I have displayed a TreeMap. I would like to display the information of the things I click. So I tried to reproduce the first example given in Dash Tutorial part 4. However it doesn’t seem to respond:

from os.path import abspath, dirname, join

import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

from ..server import app

import json

@app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


def get_tickers():
    with open(join(base_dir, data_path), 'rb') as fp:
        stock_df = pd.read_excel(fp)
        stock_df = stock_df.dropna()
        # stock_df = stock_df.where(pd.notnull(stock_df), None)
        return stock_df


df = get_tickers()


def layout():
    return html.Div([
        html.Div([
            html.Div([
                html.H5('Stocks', style={'textAlign': 'center', 'padding': 10}),
                dcc.Graph(id='graph',
                   figure=px.treemap(df, path=['Country', 'Exchange'], # values='pop',
                  # color='lifeExp', hover_data=['iso_alpha'],
                  # color_continuous_scale='RdBu',
                  # color_continuous_midpoint=np.average(df['lifeExp'], weights=df['pop'])
                ))
            ], className='pretty_container twelve columns'),
        ], className='pretty_container twelve columns'),
        html.Div([
            dcc.Markdown("""
                **Click Data**

                Click on markets in the graph.
            """),
            html.Pre(id='click-data', style=styles['pre']),
        ], className='three columns'),
    ])


if __name__ == "__main__":
    app.run_server(debug=False, port=8051)

Indeed, as one can see on the gif:

responsive_treemap
responsive_treemap3648×1640 617 KB

2

Hi
if you checked the example closely you will see that this callback

app.callback(
    Output('click-data', 'children'),
    [Input('basic-interactions', 'clickData')])

is responsible of showing the data when you click on your graph, but the “basic-interactions” represents the id of your graph, which is not the same here (yours is id=“graph”), so probably that’s why you are getting nothing because it is not actually linked to your graph at all. try to change the callback to this and try again

app.callback(
    Output('click-data', 'children'),
    [Input('graph', 'clickData')])
3

Thanks ! However clickData is None. Do you know how I can get the information of the branch of the tree of this treemap I’m clicking on?