PowerApps Chart Control – How to Use

by
SharePoint Form Designer

Want to know about PowerApps chart control? Well, this article I have explained how to use PowerApps chart control from a PowerApps collection.

Check out Complete SharePoint Training Course ($46 OFF)

Here I have created a PowerApps collection where I am storing all values and use the same PowerApps collection in the PowerApps chart control.

PowerApps Chart Control

In PowerApps, we can use chart control to display data in a Canvas app. We can use various types of charts to display data like line charts, Pie charts, bar charts, etc.

For the data to be used in chart controls, we need to make sure the data should be in a proper structure. For this, we will use here a PowerApps collection.

Configure PowerApps Chart Control

Now, we will see how to add a chart control in our PowerApps App and how to configure the chart control.

Follow the step by steps:

Step 1: Open the PowerApps -> Create a Canvas app from blank -> Create a app with Mobile or Tablet view.

PowerApps Chart Control

Step 2: Next drag and drop four Textbox and column chart in the screen as below screenshot.

PowerApps Chart Control example

Step 3: Next I have created a collection in PowerApps called BranchDetails which I defined in Textbox OnChange property like below.

Configure PowerApps Chart Control
ClearCollect( BrnchDetails,
{
ComputerScience: TextInput1.Text,
Mechanical: TextInput2.Text,
Electrical:TextInput3.Text,
IT: TextInput4.Text
}
)

Step 4: Now you can see my collection get created in the collection section. So we can use this collection in the column chart in the next step.

powerapps chart from excel

Step 5: Next select column chart and set the newly created collection as Datasource and bind the items. Once connection gets success, your all collection data will populate over in this chart control.

powerapps chart from sharepoint list

Step 6: Next run the apps and see, when you adding any items in the textbox, automatically chart also get changes based on Textbox value.

powerapps line chart multiple lines

We can also add SharePoint List as dataSource here and bind the items in Chart control in PowerApps.

You may like the following PowerApps tutorials:

In this tutorial, we learned how to use chart control in PowerApps and also we saw how to configure charts from PowerApps collection.

>