Superimposing 2 Pie charts on top of each other

Dash Python
1

Hi! I’m building a Dash application and need to create a detailed pie chart that shows two levels of information. Have created an example in excel to illustrate my point - inner pie is top level summary, and then the outer pie shows the ‘composition’ of each of the inner segment (pls ignore the numbers / labels, they are made up!)

56
Screenshot 2019-09-06 at 10.23.56.png499×526 64.3 KB

Current thought process for building this in dash is to create two donut graphs for the two levels of info, and then having the outer graph with a large ‘hole’ to line the two graphs up correctly, but i do not know how to place the graphs on top of each other. Can anyone help?

Thanks!

2

Check out the sunburst chart type, I think that’s what you’re looking for.

1 Like
3

Thanks that is exactly what i need! I’ll try building it out next week and come back if there are any problems

4

Also note that we made a D3.js tutorial for sunbursts (https://github.com/plotly/dash-sunburst) and then later made it a formal first-class chart type as part of dcc.Graph (via plotly.js): https://plot.ly/python/v3/sunburst-charts/. We recommend using the dcc.Graph / plotly.js one.

5

Hi again Chris,

I’ve built it out within my app, but for some reason the sunburst diagram is not being displayed?
I’ve created a simple app to replicate my problem - if I run the below, the app shows an empty black screen with no graph. Any idea why?

Thanks

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

labels = ['Conquests', 'First Time Buyers', 'Loyalists', 'test1', 'test2']
parents = ['', '', '', 'Conquests', 'Loyalists']
values = [20,30,40,20,40]

colors = {
    'background': '#000000',
    'text': '#ffffff',
    'graph_background':'#757474'
}


app = dash.Dash()


app.layout = html.Div(
        [
                dcc.Graph(id='sunburst',

                        figure=go.Figure(

                              data=[go.Sunburst(
                                    labels= labels,
                                    parents=parents,
                                    values=values,
                                    branchvalues='total'
                               )],

                            layout = go.Layout(
                                        plot_bgcolor= colors["background"],
                                        paper_bgcolor= colors["background"],
                                        font={"color": "#fff"},
                                        margin = go.layout.Margin(t=0, l=0, r=0, b=0)
                            )

                        ))
        ])


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

Just FYI - when i change ‘go.Sunburst’ to ‘go.Pie’ (and remove the parent and branchvalue attributes) the expected graph is being displayed…

7

What version of Dash are you on?

8

my Dash version is 1.2.0

9

Hm, I see some plotly.js errors in the console:

image
image.png1366×562 76.5 KB

There might be something about this particular dataset that is causing this chart to be malformed.

10

Okay so i’ve managed to display the sunburst graph now by removing the ‘branchvalues’ attribute completely / changing it’s value to ‘remainder’…

Do you know what about the dataset could cause the lack of response?
Have played with and changed the labels, parents and values attributes extensively, and the only time I can produce a diagram when using branchvalues=‘total’ is by replicating the dataset provided in the https://plot.ly/python/v3/sunburst-charts/ example :frowning:

11

Figured it out - when using branchvalues = total, there needs to be a parent that makes up the ‘centre’ of the sunburst diagram… so for the examples in the link above, it would be ‘Eve’. The diagram will not display if there isn’t this ‘grandparent’ label / value.