Make double donut plots (or donut plot with subgroups)

đź“Š Plotly Python
1

Is it possible to create double donut plots like this:

Donut plot with subgroups
img

Maybe with pandas dataframe?

Or what is the alternative plot for the purpose?

Thanks!

2

Didn’t see anyone from the dash community replies.

Is it possible to use plotly / python then?

1 Like
3

Hi @yxuil,

There’s not a built-in way to do this, but you could build it out of two pie charts. Here’s a starting for you:

import plotly.graph_objs as go

labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
outer_values = [4500,2500,500]
inner_values = [500, 1000, 2000, 1000,
                 500, 1000, 1000,
                 200, 300]

common_props = dict(labels=labels,
                    values=values,)

trace1 = go.Pie(
    hole=0.5,
    sort=False,
    direction='clockwise',
    domain={'x': [0.15, 0.85], 'y': [0.15, 0.85]},
    values=inner_values,
    textinfo='label',
    textposition='inside',
    marker={'line': {'color': 'white', 'width': 1}}
)

trace2 = go.Pie(
    hole=0.7,
    sort=False,
    direction='clockwise',
    values=outer_values,
    labels=labels,
    textinfo='label',
    textposition='outside',
    marker={'colors': ['green', 'red', 'blue'],
            'line': {'color': 'white', 'width': 1}}
)

fig = go.FigureWidget(data=[trace1, trace2])
fig

newplot
newplot.png700Ă—450 23.9 KB

You’ll probably want to play with the pie slice colors of the inner pie chart (trace1)

Hope that helps!
-Jon

4

This is excellent.

So the basic idea is to use “domain” parameter to place the inside pie chart on the top of outside pie chart, correct?

5

Yes, domain can be used to specify the size/location of the pie in normalized figure coordinates.

6

Thank you jmmease for your answer.

Do you know how one can turn your code into subplots ? Any kind of subplots for the sake of simplicity with your plot in it.

Thank you for your help.

7

Hi @Plotlyoko

I’m wondering if you tried using plotly.subplots.make_subplots

fig = go.Figure(data=data).set_subplots(2, 3, horizontal_spacing=0.1)

8

Hi @ geosphere

I didn’t think about

go.Figure(data=data).set_subplots(2, 3, horizontal_spacing=0.1)

I didn’t see this function on stack exchange during my research. But I’m not sur I’ve understood, once you’ve used
set_suplots the next step is to use add_traces and that is exactly what causes trouble in the first place.
For example how could we make a subplots (1,2) with the jmmease plot at the place (1,1) and at the place (1.2) ?

As a reminder what I call the jmmease plot is

import plotly.graph_objs as go

labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
outer_values = [4500,2500,500]
inner_values = [500, 1000, 2000, 1000,
                 500, 1000, 1000,
                 200, 300]

common_props = dict(labels=labels,
                    values=values,)

trace1 = go.Pie(
    hole=0.5,
    sort=False,
    direction='clockwise',
    domain={'x': [0.15, 0.85], 'y': [0.15, 0.85]},
    values=inner_values,
    textinfo='label',
    textposition='inside',
    marker={'line': {'color': 'white', 'width': 1}}
)

trace2 = go.Pie(
    hole=0.7,
    sort=False,
    direction='clockwise',
    values=outer_values,
    labels=labels,
    textinfo='label',
    textposition='outside',
    marker={'colors': ['green', 'red', 'blue'],
            'line': {'color': 'white', 'width': 1}}
)

fig = go.FigureWidget(data=[trace1, trace2])
fig

We can also use jmmease plot with this following plot. Because for me the issue is the same, I’m stuck when I want to convert plot with data = data into subplots.

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)
                 ]

fig = go.Figure(data=data, layout={"title":"Nested Pie Chart"})

fig.show()
9

(post deleted by author)