Figure data click triger callback¶

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

# Sample data
df = pd.DataFrame({
    'Category': ['A', 'B', 'C'],
    'Value': [10, 20, 15],
})

# Initialize the Dash app
app = dash.Dash(__name__)

# Define the layout of the app
app.layout = html.Div([
    html.H1("Bar Chart with Dropdown Picker"),

    # Bar chart
    dcc.Graph(
        id='bar-chart',
        figure=px.bar(df, x='Category', y='Value', labels={'Value': 'Count'}),
        config={'editable': True}
    ),

    # Dropdown picker
    dcc.Dropdown(
        id='region-dropdown',
        options=[
            {'label': 'Region 1', 'value': 'region1'},
            {'label': 'Region 2', 'value': 'region2'},
            {'label': 'Region 3', 'value': 'region3'}
        ],
        value='region1',
        style={'width': '50%'}
    )
])

# Define callback to update Dropdown picker based on clicked bar
@app.callback(
    Output('region-dropdown', 'value'),
    Input('bar-chart', 'clickData')
)
def update_dropdown(click_data):
    if click_data is None:
        # If no bar is clicked, return default value
        return 'region1'
    else:
        # Extract information from clicked bar and update Dropdown picker
        category_clicked = click_data['points'][0]['x']
        # You can implement your own logic to map the category to the corresponding region value
        # For simplicity, using a dictionary here
        category_to_region_mapping = {'A': 'region1', 'B': 'region2', 'C': 'region3'}
        return category_to_region_mapping.get(category_clicked, 'region1')

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