Linking traces in nested pie chart (for legend toggle functionality)

Dash Python
1

As part of a dashboard summarising disaster impact, we show nested pie charts which break the total damages down into portfolios (e.g. Transport) and then individual components (e.g. Roads, Railways). I’ll try to add a screenshot of one of them below.

NestedPieChart
NestedPieChart.JPG723×451 26.8 KB

I’m wondering if it’s possible to link the two traces (inner & outer donuts), so that clicking on a legend item to toggle off a portfolio item (inner donut) would also toggle off all that portfolio’s individual components (outer donut)? Or, if not, to disable the toggle functionality altogether?

In the simplified example below, could it be modified so that when a user clicks on the ‘Reds’ legend item, all of the red pie segments are toggled off (inner & outer donut)? Any suggestions would be much appreciated!

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go


data = [# Portfolio (inner donut)
        go.Pie(values=[20,40],
               labels=['Reds','Blues'],
               domain={'x':[0.2,0.8], 'y':[0.1,0.9]},
               hole=0.5,
               direction='clockwise',
               sort=False,
               marker={'colors':['#CB4335','#2E86C1']}),
        # Individual components (outer donut)
        go.Pie(values=[5,15,30,10],
               labels=['Medium Red','Light Red','Medium Blue','Light Blue'],
               domain={'x':[0.1,0.9], 'y':[0,1]},
               hole=0.75,
               direction='clockwise',
               sort=False,
               marker={'colors':['#EC7063','#F1948A','#5DADE2','#85C1E9']},
               showlegend=False)]

# Run Dash app
app = dash.Dash()
app.layout = html.Div(dcc.Graph(figure=go.Figure(data=data, layout={'title':'Nested Pie Chart'})))

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

Look into the “legendgroup” property: https://plot.ly/python/legend/

3

Hi @chriddyp, thanks for the suggestion. I’d spent a while playing with that before but couldn’t get it to work for this. For what I’m after, I think I’d need to pass in lists to the legendgroup property (e.g. legendgroup=['Reds','Blues'] for the first trace in my example, and legendgroup=['Reds','Reds','Blues','Blues'] for the second) but that doesn’t seem to work.

Assuming the legendgroup property only accepts a single string, would I need to try and build each pie chart segment by segment (if that’s possible), updating the rotation parameter for each trace as I go?