Pie Charts

Getting Started API Reference Contributing Guide Github
Search…
Pie Charts
Generate a pie plot.
A pie plot is a proportional representation of the numerical data in a column
Examples
Pie Chart from Columns in a DataFrame
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
8
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
    <title>Document</title>
10
</head>
11
​
12
<body>
13
​
14
    <div id="plot_div"></div>
15
    <script>
16
​
17
         df = new dfd.DataFrame({
18
            Price: [19, 26, 55],
19
            Location: ["NG", "GH", "SA"],
20
            Type: ['Residential', 'Non-Residential', 'Utility']
21
        })
22
        
23
        df.plot("plot_div").pie({ values: "Price", labels: "Type" })
24
​
25
    </script>
26
</body>
27
​
28
</html>
Copied!
Multiple Pie Chart from Columns in a DataFrame
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
8
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
    <title>Document</title>
10
</head>
11
​
12
<body>
13
​
14
    <div id="plot_div"></div>
15
    <script>
16
​
17
       df = new dfd.DataFrame({
18
            Price: [19, 26, 55],
19
            Count: [20, 50, 25],
20
            Type: ['Residential', 'Non-Residential', 'Utility']
21
        })
22
​
23
        df.plot("plot_div").pie({ labels: "Type"})
24
​
25
​
26
    </script>
27
</body>
28
​
29
</html>
Copied!
Configure Position of Pie Charts
If you have more than one pie charts displayed, you can set the grid parameter, and also the position of each pie. For example, in the snippet below, we set our grid to 2 by 2 and also pass a set of row and column index position. Each row/column position index correspond to each pie.
1
<!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
   <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
8
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/bundle.min.js"></script>
9
    <title>Document</title>
10
</head>
11
​
12
<body>
13
​
14
    <div id="plot_div"></div>
15
    <script>
16
​
17
       df = new dfd.DataFrame({
18
            Price: [19, 26, 55],
19
            Count: [20, 50, 25],
20
            Type: ['Residential', 'Non-Residential', 'Utility']
21
        })
22
​
23
       df.plot("plot_div").pie({ labels: "Type",
24
                                 grid: { rows: 2, columns: 2 },
25
                                 row_pos: [0, 1], col_pos: [0, 1] })
26
​
27
    </script>
28
</body>
29
​
30
</html>
Copied!
For more configuration options for Pie Charts, see the Plotly style doc.
Tables
Histograms
Last modified 17d ago
Copy link
Contents
Examples
Pie Chart from Columns in a DataFrame
Multiple Pie Chart from Columns in a DataFrame
Configure Position of Pie Charts