Create another pie chart which is a hoverData based on another pie chart

Dash Python
1

How to display the data in minor_pie_chart based on the hover data in the major_pie_chart?

Let say the data as per below:

image
image914×735 190 KB

Expected:
There will have two pie chart, one is major_pie_chart and another one is minor_pie_chart. The data in the minor_pie_chart will be based on the hover data in the major_pie_chart.

date_category = list(df['Date'].unique())

     

app.layout = dbc.Container([

dbc.Row([
    dbc.Col([
        html.P("Pie Chart:",
                style={"textDecoration":"underline"}),
        
        dcc.Dropdown(id='date_drdn', multi=False, value= '01/01/2022', 
                      options = [{'label':x, 'value':x} 
                                for x in date_category]
                      ),

                                
        dcc.Graph(id='pie-fig', figure={},style={'display': 'inline-block'})
        
            ])
        ]),

dbc.Row([
    dbc.Col([
        html.P("Pie Chart Detail:",
            style={"textDecoration":"underline"}),
        
        dcc.Graph(id='pie_detail', style={'display': 'inline-block'})
        
               ])
])


])



@app.callback(  
Output('pie-fig', 'figure'),
Input('date_drdn', 'value')
)


def update_graph(selection):
if len (selection) ==0:
    return dash.no_update

else:     
    dff = df[df['Date'] == selection]      
    fig = px.pie(dff, values='Transactions', names='Major', color_discrete_sequence=px.colors.sequential.RdBu)
    fig.update_traces(textinfo= "label+value+percent").update_layout(title_x=0.5)
    return fig

@app.callback(  
Output('pie_detail', 'figure'),
Input('pie-fig', 'hoverData')
)


def update_pie_detail_hover(hoverData):
hover_info = 'Clothes'

if hoverData:
    hover_info = hoverData['points'][0]['customdata'][0]
 
detail_df = df[df['Major'] == hover_info]
fig = px.pie(detail_df, values='Transactions', names='Minor', color_discrete_sequence=px.colors.sequential.RdBu)
fig.update_traces(textinfo= "label+value+percent").update_layout(title_x=0.5)

    

return fig
3

Unrelated to hover data… but another thing to consider for datasets like these is to visualize it in a single chart with a sunburst chart

2 Likes
4

The sunburst chart will display in the same chart right?

It let say I have to create another pie chart to show the detail instead of the sunburst chart, can I do that? Is it use the hover data?

5

hi @beginof
It’s all about figuring out how to extract from the pie chart the data that you need, based on the hoverData. You can see really good examples with hoverData in the docs.

But, I also prepared sample code for you that extracts hover data from a pie chart. I hope this helps you get a better idea of how to use the hoverData.

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

df = px.data.tips()
app = Dash(__name__)


app.layout = html.Div([

    dcc.Graph(id='major-pie', figure=px.pie(df, values='tip', names='day')),
    dcc.Graph(id='minor-pie'),

])


@callback(
    Output(component_id='minor-pie', component_property='figure'),
    Input('major-pie','hoverData')
)
def update_minor_pie(hovdata):
    if hovdata is not None:
        print("All hover data:")
        print(hovdata)
        print("Dig deeper into the data:")
        print(hovdata['points'][0])
        print("Dig deeper into the value:")
        print(hovdata['points'][0]['value'])
    return {}


if __name__ == '__main__':
    app.run_server(port=8001)
6

Hi,

The sample provided did not show data into another chart.

7

I’m sorry @beginof . I wanted to give you some guidance, and encourage you to use the hoverdata extracted to build the graph you want. Here’s the full code with the creation of another pie chart from the first pie chart’s hoverData.

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

df = px.data.tips()

app = Dash(__name__)


app.layout = html.Div([

    dcc.Graph(id='major-pie', figure=px.pie(df, values='tip', names='day')),
    dcc.Graph(id='minor-pie'),

])


@callback(
    Output(component_id='minor-pie', component_property='figure'),
    Input('major-pie','hoverData')
)
def update_minor_pie(hovdata):
    if hovdata is not None:
        print("All hover data:")
        print(hovdata)
        print("Dig deeper into the data:")
        print(hovdata['points'][0])
        print("Dig deeper into the value:")
        print(hovdata['points'][0]['value'])
        
        day_hovered = hovdata['points'][0]['label']
        dff = df[df.day==day_hovered]
        fig = px.pie(dff, values='tip', names='smoker', title='Tips breakdown on {day_hovered}')

    return fig


if __name__ == '__main__':
    app.run_server(port=8001)