Nested pie how to add titles

📊 Plotly Python
1

Hello everyone,

I hope you’re doing well, I coded a nested pie and I would like to add two titles (one for each pie). I add title option in each but there are at the same position which is understandable (see code below). So I’m wondering if there is other way.

newplot (5)
newplot (5)983×525 18.7 KB 

data = [
    # Inner donut
    go.Pie(values=[20,40,100],
       labels=['Protein','Carbohydrate', "Lipid"],
       domain={'x':[0.3,0.7], 'y':[0.2,0.8]}, 
       hole=0.5,
       direction='clockwise',
       sort=False,
       title = "Measured"
       marker={'colors':['#CB4335','#2E86C1','#64C12E']}), 
    # Individual components (outer donut)
    go.Pie(values=[5,15,30],
           labels=['Protein','Carbohydrate', "Lipid"],
           domain={'x':[0.1,0.9], 'y':[0,1]},
           hole=0.75,
           direction='clockwise',
           sort=False,
           marker={'colors':['#CB4335','#2E86C1','#64C12E']},
           title = "Reference",
           showlegend=True)
]
    
figure=go.Figure(data=data, layout={'title':'Nested Pie Chart'})

figure.show()

Thank you for your help !

2

For Pie Graph Object you need to use titleposition to move the title location.

The position arguments for titlepostion are: ‘top left’, ‘top center’, ‘top right’, ‘middle center’, ‘bottom left’, ‘bottom center’, ‘bottom right’

Line I will be adding to your code to make this work is:

titleposition='top center',

Example below with your code will put the “Reference” title up to the top center while keeping the “Measured” title in the middle (Also just a heads up that you’re missing a comma after the line - title = “Measured” in the code paste above)

data = [
    # Inner donut
    go.Pie(values=[20,40,100],
       labels=['Protein','Carbohydrate', "Lipid"],
       domain={'x':[0.3,0.7], 'y':[0.2,0.8]}, 
       hole=0.5,
       direction='clockwise',
       sort=False,
       title = "Measured",
       marker={'colors':['#CB4335','#2E86C1','#64C12E']}), 
    # Individual components (outer donut)
    go.Pie(values=[5,15,30],
           labels=['Protein','Carbohydrate', "Lipid"],
           domain={'x':[0.1,0.9], 'y':[0,1]},
           hole=0.75,
           direction='clockwise',
           sort=False,
           marker={'colors':['#CB4335','#2E86C1','#64C12E']},
           title = "Reference",
           titleposition='top center',
           showlegend=True)
]
    
figure=go.Figure(data=data, layout={'title':'Nested Pie Chart'})

figure.show()

pie1
pie1803×461 19.8 KB

Hope this helps!

1 Like
3

Hi @payton-dev ,

welcome to the forums and thanks for your answer.

I played around with this agurment aswell. Do you know why the circles are not centered anymore? It becomes clearer when you use titleposition='top right' for example, but even in the figure shown above you can observe the eccentricity.

1 Like
4

Hi @AIMPED,

I didn’t notice that until you mentioned it good eye. After a bit of testing myself what I presume happens is the figure is generated based on the title position. I’d assume this is a D3.js limitation. As you noted it’s easier to spot if you shift it to a corner.

First thing I’ll say here is apparently the titleposition is depreciated (still works for now but who knows when it will break). What should be used is a dict in the title and utilize the position argument inside the dict.

title = dict(text="Reference",
                   position='top center'
),

Now for a fix on the shifting graph after setting one to top center. There might be a better way to solve this but an easy solution is just to change the domain a bit.

It looks like setting y to [0.16,0.8] will be close enough.

data = [
    #Inner donut
    go.Pie(values=[20,40,100],
       labels=['Protein','Carbohydrate', "Lipid"],
       domain={'x':[0.3,0.7], 'y':[0.16,0.8]}, 
       hole=0.5,
       direction='clockwise',
       sort=False,
       marker={'colors':['#CB4335','#2E86C1','#64C12E']},
       title='Measured'
       ),
    # Individual components (outer donut)
    go.Pie(values=[5,15,30],
           labels=['Protein','Carbohydrate', "Lipid"],
           domain={'x':[0.1,0.9], 'y':[0,1]},
           hole=0.75,
           direction='clockwise',
           sort=False,
           marker={'colors':['#CB4335','#2E86C1','#64C12E']},
           showlegend=True,
           title=dict(text='Reference',
                        position='top center'
                     ),
            )
]
    
figure=go.Figure(data=data, layout={'title':'Nested Pie Chart'})

figure.show()

pie1

Or alternatively a second option is to set both of the graphs to have the position top center which will shift both the same amount and be even.

data = [
    #Inner donut
    go.Pie(values=[20,40,100],
           labels=['Protein','Carbohydrate', "Lipid"],
           domain={'x':[0.3,0.7], 'y':[0.2,0.8]}, 
           hole=0.5,
           direction='clockwise',
           sort=False,
           marker={'colors':['#CB4335','#2E86C1','#64C12E']},
           title=dict(text='Measured',
                      position='top center'
                     )
       ),
    # Individual components (outer donut)
    go.Pie(values=[5,15,30],
           labels=['Protein','Carbohydrate', "Lipid"],
           domain={'x':[0.1,0.9], 'y':[0,1]},
           hole=0.75,
           direction='clockwise',
           sort=False,
           marker={'colors':['#CB4335','#2E86C1','#64C12E']},
           showlegend=True,
           title=dict(text='Reference',
                     position='top center'
                     ),
         )
]
    
figure=go.Figure(data=data, layout={'title':'Nested Pie Chart'})

figure.show()

pie2

2 Likes
5

@payton-dev , great answer, thank you!

6

It helps indeed ! Thank you for that it’s flawless