How to pull the pie slice that was clicked

Dash Python
1

Hi @adamschroeder ,

I’m working on the dash framework to build visuals. Can you suggest me a solution on how to highlight the visual part which is being clicked as the users need to know which filter is being applied.
Do share your inputs

2

hi @Akshaya
can you please clarify this ask :point_up_2:
Can you give an image example?

3

yes @adamschroeder . I have multiple charts in my dashboard. Say suppose, I’m clicking a portion of the pie chart to filter another bar chart. So I want that portion of pie chart to get highlighted just as how it works on power bi tool. If it gets highlighted end users will be able to understand which portion was clicked when they view the data in the bar chart.

4

Hi @Ashankar
Here’s one way of pulling the pie slice that user clicked:

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

df = px.data.tips()

fig = px.pie(df, values='tip', names='day')


app = Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='my-pie', figure=fig),
    dcc.Graph(id='my-bar', figure={})
])


@callback(
    Output(component_id='my-bar', component_property='figure'),
    Output(component_id='my-pie', component_property='figure'),
    Input(component_id='my-pie', component_property='clickData'),
prevent_initial_call=True
)
def update_output_div(slice_clicked):

    print(slice_clicked)
    extract_day = slice_clicked['points'][0]['label']
    
    dff = df.copy()
    day_list = list(dff.day.unique())
    # extract the day the user clicked
    day_list.remove(extract_day)
    # insert the day as the first value in the list of days
    day_list.insert(0, extract_day)
    # re-order the list so they day clicked is first 
    dff.day = pd.Categorical(dff.day, categories=day_list)
    dff = dff.sort_values('day')
    print(dff.day.unique())
    
    fig = px.pie(dff, values='tip', names='day')
    # pull the first value from the list of pie names
    fig.update_traces(pull=[0.2], selector=dict(type='pie'))
    return dash.no_update, fig

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

Hi @adamschroeder ,

I have already done this. I’m looking for a solution to highlight that pie slice that was clicked. Example, If the slice of that pie is green color when user clicks it I want that slice to get highlighted by applying some effect which indicates the user that this slice is clicked.

6

ok, I combined pull slice and updated color to yellow if pulled. Just remove the pull part if you prefer to remove it.

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

df = px.data.tips()

fig = px.pie(df, values='tip', names='day')

app = Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='my-pie', figure=fig),
    dcc.Graph(id='my-bar', figure={})
])


@callback(
    Output(component_id='my-bar', component_property='figure'),
    Output(component_id='my-pie', component_property='figure'),
    Input(component_id='my-pie', component_property='clickData'),
    prevent_initial_call=True
)
def update_output_div(slice_clicked):
    print(slice_clicked)
    extract_day = slice_clicked['points'][0]['label']

    dff = df.copy()
    day_list = list(dff.day.unique())
    # extract the day the user clicked
    day_list.remove(extract_day)
    # insert the day as the first value in the list of days
    day_list.insert(0, extract_day)
    # re-order the list so they day clicked is first
    dff.day = pd.Categorical(dff.day, categories=day_list)
    dff = dff.sort_values('day')
    print(dff.day.unique())

    fig = px.pie(dff, values='tip', names='day', color='day',
                 color_discrete_map={dff.day.unique()[0]: 'yellow',
                                     dff.day.unique()[1]: 'cyan',
                                     dff.day.unique()[2]: 'royalblue',
                                     dff.day.unique()[3]: 'darkblue'})
    # pull the first value from the list of pie names
    fig.update_traces(pull=[0.2], selector=dict(type='pie'))
    return dash.no_update, fig


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