Pie Chart Control in the Power Apps
The Pie chart control is used to show the Labels and their corresponding value of that label.
The Pie chart has the following properties: 1. Items The Items property specifies the source of data that appears in a control such as a gallery, a list, or a chart. 2. ShowLabels The ShowLabels property specifies whether a pie chart shows the value that is associated with each of its wedges. 3. Explode The Explode property specifies the distance between wedges in a pie chart. 4. LabelPosition The LabelPosition property specifies the location of labels in a pie chart relative to its wedges. 5. X The distance between the left edge of a control and the left edge of its parent container (screen if no parent container). 6. Y The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).
1. Excel as the DataSource We can use the Excel table as a data source to create a pie chart in Power apps. The following excel file is used for this exercise Chart-controls.xlsx. You can download it by clicking on the link.
The name of the Table is Table1.
Name | Marks |
---|---|
Suman | 45 |
Jyoti | 97 |
Akshay | 67 |
Laveena | 87 |
Lata | 46 |
Anjali | 85 |
Rohan | 48 |
Sumit | 97 |
Ashish | 70 |
Step 1: Add the Excel table in the Power app using Add Data section. Insert a Pie chart control to the screen by clicking on + Insert and then from the Charts section click on Pie chart.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-01.webp)
Step 2: The Pie chart control is a group of three controls.
- A Label for the title,
- The chart graphic, and
- A Legend
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-02.webp)
Step 3: There is a Text label control in the group, used to specify the title of the chart. By default, its name is ‘Chart Title’. We can modify it as per our requirement.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-03.webp)
After updating the text of the Label control.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-04.webp)
Step 4: Select the Pie chart control and set its Items property to the data source.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-05.webp)
After setting the Items property to the data source Table1.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-06.webp)
Step 5: We can set the ShowLabels property to true or false. By default, it is true.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-07.webp)
After setting it to false.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-08.webp)
Step 6: Set the Explodeproperty to the value 20. By default, it is 0.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-09.webp)
After setting the value.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-10.webp)
Step 7: Set the LabelPosition property to the value Inside. By default, its value is Outside.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-11.webp)
After changing the Label position value to Inside.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-12.webp)
2. Sharepoint as the DataSource
We can use the pie chart control with Sharepoint as a Data source.
TeacherID | Teacher name | Teacher Qualification | Teacher salary | Expenditure |
---|---|---|---|---|
1 | Sushmita | B. Tech | 26,000 | 20,000 |
2 | Anjali Sharma | MBA | 28,000 | 22,000 |
3 | Lata Verma | BBA | 22,000 | 18,000 |
4 | Alia | M. Tech | 34,000 | 25,000 |
5 | Vicky | Engineer | 13,000 | 6,000 |
6 | Aakansha | LLB | 45,000 | 23,000 |
7 | Shilpa Shetty | Yoga guru | 60,000 | 15,000 |
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-13.webp)
Step 1: Add the sharepoint list in the power apps by using Add data section. Add one more Pie chart control and set the Items property to the ‘Teachers Data’, i.e., name of our sharepoint list.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-14.webp)
We can see that we specify in the Labels the Teachername column and in the Series we are specifying the Teachersalary column from the sharepoint list. In the dropdown we can see all the columns including those that are created automatically when we create a list.
Step 2: In the ItemColorSet property we can specify the different color values of the control. We can give the color values directly or by using the RGBA format.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-15.webp)
Suppose we are specifying for the first three values only and leave the rest.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-16.webp)
Step 3: The Color property specifies the text color inside the control. Suppose we are giving this value to Color.White.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-17.webp)
Step 4: Add a Text label control and set its Text property to the following powerapps formula:
Power Apps Formula
Here, PieChart1_1 is the name of our graphic control and by leveraging its Selected property we are fetching the entire record. From the record by using the dot notation concept we are extracting the ‘Teacher salary’ column value.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-18.webp)
Put the preview mode and try by clicking on the various slices of the pie chart. Suppose we click on the Slice of Shilpa Shetty. The value in Text label changes to 60000, i.e., the Shilpa Shetty Salary.
![Pie chart in Power Apps Pie chart in Power Apps](media/pie-chart-19.webp)