In this Power Apps tutorial, We will discuss PowerApps charts, different types of charts in PowerApps. We will see an example of how to use column, line, and pie chart in PowerApps.
I will also show you how to add a scrollable screen in Powerapps.
Powerapps Charts
Here, you will see how to use different types of charts in the Scrollable screen in Power apps.
There are three types of Powerapps charts as:
- Column Chart
- Line Chart
- Pie Chart
PowerApps charts data from SharePoint List
To use PowerApps charts data, we will use a list in SharePoint Online.
In the SharePoint Site, Create a List as like Products. This Product list is having some columns like Title, Vendor, Customer Name, Quantity, Price, etc as shown below.
Here, I am going to display these records with the help of graphical representations like Pie chart, Line chart, etc in the Powerapps Scrollable screen.

To use these above charts, you need to do these below things:
- Sign in Powerapps
- Create a New Canvas app and start with Tablet layout
- Add a new Scrollable screen
- Connect a new or existing Data Source and SharePoint Site to your App
- Add Charts (Column chart, Line chart, Pie chart) into the Powerapps Scrollable screen
Create a Canvas app in Powerapps for Charts
Open the Power Apps page through the Browser. Sign in your Power Apps using Microsoft account.
In the Power Apps page, Select + New app -> Canvas as shown below.

Choose Phone or Tablet layout under the Blank app section.

Scrollable screen in Powerapps
In Powerapps, a scrollable screen is used to show different types of items when a user will scroll the page.
Suppose, you have added different types of charts on your scrollable screen. When you will scroll the screen, then all the charts will visual to the user.
This scrollable screen maintains its relative positions within its limited section whether it is a Tablet app or a Phone app.
Go to Home tab -> New screen -> Select Scrollable as like the below screenshot.

Now the scrollable screen will appear as shown below.
The scrollable screen is having one Title section, Item section and a +Add section which is used to add a new section.

Connect a new or existing Data Source and SharePoint Site to your App
From the left navigation of the page, Go to Data sources, expand Connectors and select the SharePoint Data Source. Add a new or existing SharePoint connection.

Provide your SharePoint Site URL for the location of your list and hit the Connect button. Also, you can directly specify the SharePoint Site Url under the Resent sites section.

Choose your SharePoint List (Products) and click on the Connect button. Now the SharePoint Data source connection is added to the Scrollable screen.

Column Chart in Powerapps
Now, we will see how we can use Powerapps column chart.
To add a Column chart in Powerapps, Go to Insert tab -> Charts -> Column chart as shown below.

Also, you can add the Column chart by clicking on this link as Add an item from the insert pane (middle part of the page). Then choose the Column chart from the left navigation.

Add new section in the Scrollable screen
The below screenshot represents a Column chart representation. To add a new section (as like Line or Pie chart) under this Column chart, you can use this below +Add section link and add an item from the insert pane.

Rename Label of the Scrollable screen
Just select the Label by double-clicking on it. Go to the Label formula bar and change the name as:
Text = "Product Details"
When you will change the name in the Label bar, then the name will automatically change in its Properties section.
Also, you can provide some more Label properties like Font, Font Size, Font Weight, Color, etc.

PowerApps Column chart Properties
Select the Column chart and go to its Properties tab. First, Select the Items as your SharePoint Data source (Products).
Select the Grid style as All, X only, Y only or None. Similarly, if you want to display the marker values in the chart, then enable to On otherwise Off.
In this way, you can use the rest of all the chart properties like Items gap, Number of series, Display mode, etc.

Go to the Advanced section. Here, under the Items section, you can see the Labels and Series(s). Change those as per your needs as shown below.

Rename the Title of Column chart
To rename the Title section, Select the Title and go to the Properties section. Put the Text as “Product And Price”. Also, you can put the below formula in the Title formula bar:
Text = "Product And Price"
In the same way, you can provide some more properties to Title as like Font, Font Size, Font Weight, Text alignment, etc.
After all, the chart visual will display as like the below screenshot.

Line Chart in Powerapps
Now, we will see how to use PowerApps line chart.
To add a Line chart in the Scrollable screen, Click on +Add section -> Add an item from the insert pane -> Charts -> Line chart as shown below.
Then the chart visual will add on the screen. In the same way as the Column chart, Rename the Chart Title, and provide some more properties to this chart.

Line chart Properties
- Select the Line chart and go to the Properties tab (from the right side of the page).
- Select the Items as Products (SharePoint List). Select the Grid style like All, X only, Y only, or None.
- Provide other more properties like Markers, Items gap, X label angle, etc.

In the Advanced tab, as I have taken the Labels as Customer Name (one column name of the Product list), So the chart is showing with the customer name with Quantity.

Pie Chart in Powerapps
Let us see now, how to use Pie chart in PowerApps.
Similarly, To add a Pie chart in the Scrollable screen, Click on +Add section -> Add an item from the insert pane -> Charts -> Pie chart as shown below.
Once the Pie chart will add in the screen, just rename the Chart Title, and provide some more properties to this chart.
Pie chart Properties
- Select the Pie chart and go to the Properties tab (from the right side of the page).
- Select the Items as Products (SharePoint List). Select the Grid style like All, X only, Y only, or None.
- Provide other more properties like Show labels, Label position, Display mode, Visible etc.

In the Advanced tab, as I have taken the Labels as Title (one column name of the Product list), So the chart is showing all the Title name as like below screenshot.

Preview the Powerapps app
To Preview the App to see how it works, Press F5 or Run icon on the top of the page. This below screenshot represents the total visual of all the three charts that present one after another.
In the Powerapps scrollable screen, when you will scroll down, then you can see all the three visuals in the Powerapps app.

Also, you may like some below Powerapps tutorials:
- How to create PowerApps collection from Excel
- Create a Data Table from Excel Data using Power Apps
- How to share PowerApps with external users
- How to navigate between screens in PowerApps
- How to display images from a SharePoint Online library in PowerApps
- PowerApps show hide fields based on Yes/No column
- PowerApps gallery control filter example
- Various PowerApps Validation Examples
In this Power Apps Tutorial, We discussed how to use a Scrollable screen in Powerapps. Also, We saw PowerApps charts and how to add different types of charts in PowerApps like Line chart, Column chart, and Pie Chart.
I am Bijay a Microsoft MVP (8 times –Â My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Obrigado por compartilhar! Bom trabalho!
I translated to English and it seems you said, Thanks for sharing! Good job!
I appreciate your kind words, Rafael.
Hi,
Is it possible to sort or order the axis alphabetically?
Thank you
Sandor
busco dar formato de porcentaje en power Apps pero no he logrado hacerlo