PowerApps charts (Column, Line and Pie Chart)

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.