Power Apps Pie Chart- Let's Build It

Power Apps is a low-code development platform from Microsoft that allows customers to create custom business apps without substantial coding experience. Power Apps include a wide range of built-in controls and functions, including visualization such as Pie charts.

A pie chart is a visualization that portrays data in the form of a circular slice or wedge. Each portion indicates a percentage or proportion of the whole data set where each slice’s value in proportion to the total determines its size.

Recently, we have been asked by one of our clients to build a Pie Chart on the Power Apps canvas apps. I built a pie chart using the Power Apps chart control to fulfill the requirement. This tutorial will show how to build a Pie chart within a Power Apps Canvas app.

Along with this, we will discuss what the different types of properties come under a Power Apps Pie chart, how to build a pie chart from different types of data sources such as SharePoint list, collection, an Excel table, etc., how to display the percentages on a Power Apps pie chart, how to group the data on a pie chart, and many more.

Keep continuing the tutorial to explore more!

Also, read: Power Apps Column Chart – How to Build it

Table of Contents

What is a Power Apps Pie Chart?

Microsoft Power Apps has different types of chart controls, including a Pie Chart. A Power Apps Pie chart control allows us to bind it to a data source and define the data fields that determine the size of each slice. That is a Pie chart control that displays relative values compared to one another.

Also, it allows to customize the formation of the pie chart, such as colors, labels, and legends, to make it more visually appealing and informative.

To add a pie chart to the Power Apps canvas app screen, follow the below steps:

Create a blank Power Apps canvas app or you can take an existing one.
On the Power Apps canvas app screen, navigate to the Insert tab > Expands Charts > Pie Chart. Once you select the chart, it will be added to the screen with visualizing the sample data.

This is how to add a pie chart to the canvas app from the Power Apps chart control.

Also, read: Power Apps Line Chart – How To Build It

Properties of Power Apps Pie Chart

Let’s go over some of the key properties of a PowerApps Pie chart before we start working with a Pie chart in Power Apps. Such include:

Items: The source of data for a control that appears such as a gallery, list, or chart.
ShowLabels: Whether or not a pie chart displays the value corresponding with each of its wedges.
Explode: On a pie chart, it defines the distance between wedges.
ItemBorderColor: In a pie chart, it defines the colors of the border enclosing each wedge.
ItemBorderThickness: The width of the border surrounding each wedge in a pie chart.
ItemColorSet: It represents each data point’s color in a pie chart.
LabelPosition: It represents the label layout or position in a pie chart with respect to its wedges.
OnSelect: When a user taps or clicks a control, the respective actions are taken.

Build Power Apps Pie Charts from a Collection

This section will show how to build a pie chart from a Power Apps collection within the Canvas app.

For this, we have created a collection on the screen’s OnVisible property named CollRevenue having some data based on revenues. Or, you can insert the below expression on the screen’s OnVisible property to create the collection.

OnVisible = ClearCollect(
    ColRevenue,
    {
        Source: "Amazon",
        Revenue: "$450",
        Profit: "43%"
    },
    {
        Source: "Google",
        Revenue: "$359",
        Profit: "33%"
    },
    {
        Source: "Twitter",
        Revenue: "$186",
        Profit: "15%"
    },
    {
        Source: "Instagram",
        Revenue: "$256",
        Profit: "62%"
    },
    {
        Source: "Facebook",
        Revenue: "$230",
        Profit: "24.66%"
    },
    {
        Source: "Google",
        Revenue: "$359",
        Profit: "33%"
    },
    {
        Source: "Snapchat",
        Revenue: "$103",
        Profit: "5%"
    },
    {
        Source: "Microsoft",
        Revenue: "$380",
        Profit: "55%"
    }
)

Build Power Apps pie chart from a collection

As per the above expression, when the screen will visible the collection will be created within the Power Apps.

Next, add a Power Apps Pie chart control to the canvas app screen. Select the chart and connect it with the Power Apps collection i.e., ColRevenue.

Items = ColRevenue

Once the pie chart is connected with the collection, it will appear as below:

Power Apps pie chart from collection — Power Apps pie chart from a collection

This is how to build a pie chart within a Power Apps canvas app.

PowerApps Pie chart from SharePoint list

Similarly, here we will see how to build a pie chart from a SharePoint list within the Power Apps.

We have a SharePoint list named Product Revenue having different types of columns such as Products, total sales, gross profit, operating expenses, and net business result.

Now, we will build a Power Apps pie chart using the above SharePoint list that will visualize each product by their respective total sales. For this, the following steps are:

Add the SharePoint list to the Power Apps canvas app.
Add a pie chart to the Power Apps screen.
Connect the chart with the above-mentioned SharePoint list.
Select the pie chart and navigate to Advanced (on the right-side panel), set the Labels as Title and Series as TotalSales.

PowerApps Pie chart group by

In the preceding example, we saw how to create a PowerApps pie chart from a SharePoint list. If we look closely, we can notice that the chart has some repeating data (Products) with various values. Nevertheless, this is not the best approach to showing data in a Pie chart.

Here, we will see how to merge or group similar data within a Power Aps pie chart.

In the above example, select the Pie chart and insert the below expression on the chart’s Items property.

Items = AddColumns(
    GroupBy(
        'Products Revenue',
        "Title",
        "Grouped Product"
    ),
    "TotalSalesbyProduct",
    Sum(
        'Grouped Product',
        'Total Sales'
    )
)

Where,

‘Products Revenue’ is the name of the SharePoint list.
“Title” is the name of the Sharepoint list based on which we will group the data.
“Grouped Product” is the name of a new column created for the nested grouped data.
“TotalSalesbyProduct” is the name of the unique column.
‘Total Sales’ is the name of the SharePoint list based on which the calculation will take place.

Once the above formula is applied to the pie chart control, the chart will appear with the grouped data as shown below:

This is how to group a pie chart within the Power Apps canvas app.

Also, read: How to do group by and calculate sum in Power Apps?

PowerApps Pie chart show values

Here, we will see how to show values within the Power Apps pie chart. Let’s take the above Pie chart, which will display the product names along with the respective total sales amount.

For this, the following steps are:

On the above Power Apps pie chart, insert the below expression on the chart’s Items property.

Items = AddColumns(
    GroupBy(
        'Products Revenue',
        "Title",
        "Grouped Product"
    ),
    "TotalSalesbyProduct",
    Sum(
        'Grouped Product',
        'Total Sales'
    ),
    "ProductLabel",
    Concatenate(
        Title,
        " - ",
        Text(
            Sum(
                'Grouped Product',
                'Total Sales'
            )
        )
    )
)

Also, set the Pie chart’s Labels and Series as ProductLabel and TotalSalesbyProduct respectively.
Now, we can see the Power Apps pie chart will appear with the products’ names along with the total sales amounts as shown below:

Display values of series and labels in Power Apps pie chart canvas app

This is how to show values within a Power Apps pie chart control.

Power Apps Pie Charts show percentages

In this section, we will see how to show percentages within a Power Apps Pie chart control. We are going to use the above SharePoint list ‘Products Revenue‘ to calculate the percentage of gross profit.

Then we will build a Power Apps Pie chart to visualize the products with their respective gross profit percentage. For this, the following steps are:

On the Power Apps Pie chart, insert the below expression on the chart’s Items property.

Items = AddColumns(
    'Products Revenue',
    "GrossProfitPercentage",
    Text(
        Value('Gross Profit' / 'Total Sales') * 100,
        "[$-en-US]#.00%"
    )
)

Also, set the Labels and Series as GrossProfitPercentage. We can see the Power Apps pie chart will appear below:

To display the product’s title with their respective gross profit percentage, insert the below expression on the Legend’s Items property of the pie chart.

Items = Concatenate('Products Revenue'.Title,"-",PieChart1.SeriesLabels)

Now the chart will visualize the product’s title and their respective gross profit percentage as shown below:

This is how to show percentages within Power Apps Pie Charts.

Have a look: Power Automate Dataverse Upload a File or an Image

Power Apps Pie Charts item color set

In this section, we will see how to set the color within a Power Apps Pie chart control. In the Power Apps Pie chart, there is a property named ‘ItemColorSet‘ that allows one to set the color of each item of a Pie chart.

To set the color for each item of the Power Apps pie chart, the following steps are:

Select the Power Apps Pie chart, and navigate to the ‘ItemColorSet‘ property.
Insert the colors as per the requirement. Below, I have set 10 colors for 10 each item.

ItemColorSet = [Color.AliceBlue, Color.Red, Color.Green, Color.DeepPink, Color.Yellow, Color.Blue, Color.Orange,Color.RosyBrown, Color.MediumPurple,Color.Lime]

This is how to set colors within a Power Apps Pie chart.

You may like these Power Apps tutorials:

Conclusion

From this Power Apps tutorial, we learned all about Power Apps Pie chart control. Also, we have discussed:

What is a Power Apps Pie Chart?
What are the Properties of Power Apps Pie Chart?
Build Power Apps Pie Charts from a Collection
How to build a PowerApps Pie chart from a SharePoint list?
How to do a PowerApps Pie chart group by?
How to show values in a PowerApps Pie chart?
How to display percentages within a Power Apps Pie Chart?
How to set the Power Apps Pie Chart item color?

Bijay Kumar

After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.