Plotly How to draw “Pie Chart”

　In plotly, graphs are intuitive and easy to use, and the pie chart, which is the subject of this article, is one of those graphs that will come in handy after switching from other visualization tools!

Table of content

This is all you need to remember
1. Sample code
Option to customize the pie chart
For those who want to use pie charts more

This is all you need to remember

These are the only two things you need to know at a minimum!

　In Scatter (scatter plots, line graphs, etc.), the x and y coordinate values are set as arguments, but in pie charts, the "labels" (the items to be classified) and the corresponding values "values" are set.

(When reading from a pandas data frame, just set the corresponding columns in labels and values)

go.Pie(labels="List of labels to be classified", values="list of values")

　You can draw a pie chart with just the two arguments I've shown you so far! 　In fact, if you draw a graph of the percentage of population by continent, it will look like the figure below!
　　

Sample code

# Population ratio graph by continent
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
# Data preparation
df = px.data.gapminder()
df_2007 = df[df['year']==2007].groupby('continent').sum().reset_index()

fig = go.Figure()
fig.add_trace(
    go.Pie(labels = df_2007['continent'],
           values = df_2007['pop'])
)
fig.show()

Option to customize the pie chart

　You can draw a pie chart at least by setting the "labels" and "values" that we have introduced so far! However, you can use options to make the graph more visible and suitable for your purpose, so I will introduce the options one by one!

Options for operation

hoverinfo : Setting the information to be displayed

　In Plotly, you can hover the cursor over a value to see the accompanying information about that value, but this option allows you to set the information to be displayed at that time!
In the example below, only the label and the percentage of the pie chart can be displayed.

hoverinfo = 'label+percent'

Text-related options

textinfo

　Set the text information to be displayed in the pie chart.
　By default, the percentage is displayed, but in the example below, the value set in values can be displayed.

textinfo = 'value'

textfont_size

　Set the size of text information to be displayed in the pie chart.

textfont_size = 20

textposition

　Setting the text position
By default, the text position is set to "auto" and will be adjusted automatically, but there are other settings such as "inside" and "outside".

"inside" : Display inside the graph
"outside" : Display outside the graph

textposition = 'inside'

Options for graph decoration

marker

　You can decorate the colors and lines of your pie charts!
The following can be set: the color of the fill in the pie chart, the color and thickness of the border (frame) of each item
(When setting, use dict (dictionary type))

 marker = dict(line=dict(color='#000000', width=2))

hole (doughnut diagram)

　By making a hole in the center of the pie chart, you can create a donut diagram.
Optionally, you can specify the size of the hole with a value between 0.0 and 1.0, so you can adjust it !

hole = .4, # The size of the hole in the pie chart (0.4 in this example)

pull (Cut out a portion of the graph)

　This option allows you to cut out a part of the pie chart!
Options include the element to be cut and the degree of cutting, with values between 0.0 and 1.0.

pull = [0, 0.2, 0, 0, 0] # Cut out the second element by 0.2

Sample code

　Using the options I've outlined so far, I drew a pie chart of population ratios by continent and country, as shown in the figure below!
Also, I have used subplot to put the two graphs side by side, and I will explain how to write this.Plotly Display multiple graphs side by side (make_subplots, set_subplots)

# Population ratio graph by continent
import pandas as pd  
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
# Data Preparation
df = px.data.gapminder()
df_2007 = df[df['year']==2007]
df_2007_continent = df_2007.groupby('continent').sum().reset_index()

fig = make_subplots(rows=2, cols=1,specs=[[{'type':'domain'}], [{'type':'domain'}]],
                   subplot_titles=['By continent', 'By country'])#type domain
fig.add_trace(
    go.Pie(
           labels = df_2007_continent['continent'],
           values = df_2007_continent['pop'],
           name = 'continent'), 1,1
)

fig.add_trace(
    go.Pie(
           labels = df_2007['country'],
           values = df_2007['pop'],
           name = 'continent'), 2,1
)

fig.update_traces(
                hoverinfo='label+percent', # Set the information to be displayed when the cursor is hovered over it.
                textinfo='value',          # Set the text information to be displayed in the pie chart (default: percentage)
                textfont_size=20,          # Set the font size for text.
                marker=dict(line=dict(color='#000000', width=2)), # Setting up a pie chart's border (line), fill color (color), etc.
                textposition='inside', # The position of the text ("inside": displayed inside the graph)
                hole = .4, # Size of the hole in the pie chart (to donut diagram)
                pull = [0, 0.2, 0, 0, 0], # It is possible to extract only some elements
)

fig.show()