Power Apps Chart Control – Complete tutorial with examples

The Power Apps chart control is a powerful tool for creating rich and interactive visualizations of data in Power Apps. In this Power Apps Tutorial, we will go over everything there is to know about Power Apps chart controls.

Recently, one of our clients wanted to display their data via visualizations within the Power Apps. To implement this, we have created different types of charts using the Power Apps chart control. In this tutorial, I am going show you, how to build a chart in a Power Apps canvas app.

Along with this, we are going to cover how to create a chart from a SharePoint list, how to build a Power Apps chart from a collection, how to customize the chart with item color, how to display the chart by grouping their data, how to apply filters on the PoweApps charts, and so on.

Keep continuing with this article to explore more about the Power Apps Charts control. Happy reading!

What is Power Apps chart control?

• Power Apps chart control is a feature in Microsoft Power Apps that allows users to visualize data in the form of charts, graphs, and other visual representations.
• The chart control provides a range of customization options, including different chart types, data series, and colors. It also supports interactive features such as drill-downs, tooltips, and animations.
• Charts are visual representations of tables that provide users with a quick and simple analysis of their data. They can be used in dashboards and reports, as well as associated with views.

Different Types of Chart Controls in Power Apps

Recently, Power Apps provides 3 different types of charts to visualize the data in a canvas app. These are line charts, pie charts, and bar charts.

• Column Charts: It visualize the data in a tabular format.

Check out a complete tutorial on Power Apps Column Chart.

• Line Charts: It visualizes the data that are connected by straight line segments named ‘Markers‘.

Check out more on Power Apps line chart.

• Pie Charts: It visualize the data in a circular format.

These are the charts that are available in the Power Apps canvas app.

Build Power Apps charts form a SharePoint list

In this section, we’ll look at how to make a chart from a SharePoint list. That is, we will make a column chart with data from a SharePoint list.

Below, we have prepared a canvas app that is displaying the SharePoint list data on a data table, and also, we visualize that SharePoint list data via a Power Apps Column Chart.

To create a chart from the SharePoint list, the following steps are:

• We have prepared a SharePoint list named ‘Project Expenses‘ having columns such as Title, and Expenses.

• Now, we will create a column chart using the above SharePoint list within the Power Apps.
• Build a blank canvas app or you can open any existing canvas app. Connect the SharePoint list to the Power Apps canvas app as the data source.
• To add a column chart to the Power Apps canvas app screen, navigate to Inserts > Charts > Column Chart > Select.
• A sample column chart will appear on the canvas app screen as shown below.

• To connect the chart with the SharePoint list, select the chart and set the SharePoint list name as ‘Project Expenses‘ on the column chart’s Items property.

Items = 'Project Expenses'

• Let’s customize the Power Apps column chart by giving a chart Title to it. Ex: Project Expenses.

• Now, select the column chart and navigate to Advanced mode.
• Set labels and series from the dropdown control as per the business requirements. Here, we have set the properties as below:

Labels: Title
Series: Expenses

Where Title and Expenses are the SharePoint list fields.

• Now, adjust the height and width of the column chart to fit the screen as needed. You can also add a data table control to the screen to display the SharePoint list data.

This is how to create a Power Apps chart using a SharePoint list.

Create Power Apps chart from a collection

In this part, we’ll look at how to create a chart by utilizing a Power Apps collection. That is, we will construct a collection in Power Apps and then use that collection to generate a line chart(or you can create a pie or column chart) in the Power Apps canvas applications.

For this, the following steps are:

• On the canvas apps’ screen, add a Power Apps button control.
• Insert the below expression on the button’s OnSelect property to create a collection.

OnSelect = ClearCollect(
    collSales,
    {
        Month: "January",
        Sales: "$120"
    },
    {
        Month: "February",
        Sales: "$250"
    },
    {
        Month: "March",
        Sales: "$180"
    },
    {
        Month: "April",
        Sales: "$80"
    },
    {
        Month: "May",
        Sales: "$100"
    },
    {
        Month: "June",
        Sales: "$210"
    },
    {
        Month: "July",
        Sales: "$260"
    },
    {
        Month: "August",
        Sales: "$350"
    }
)

where collSales is the name of the collection that we have created. Month and Sales are the headers of the collection.

• When we click on the button, a collection will be created on the app. Then, add a line chart to the Power Apps screen and connect that chart with the collection. Select the Line chart and insert the collection name within the Items property.

Items = collSales

Once the collection is connected to the chart, the chart will appear as shown below within the Power Apps screen:

This is how to build a Power Apps chart by utilizing a collection.

Apply color to a Power Apps Chart

While dealing with Power Apps charts, we may need to modify the color of the chart. The chart is colored by default. Yet, it allows you to customize the colors based on your needs.

We have prepared a line chart using a collection named ‘CollSalesReport‘ having 3 columns such as Month, Profit, and Loss. Using this collection, we have prepared a line chart as shown below:

Let’s update the above default chart color to another. For this, the following steps are:

• Select the above line chart.
• Insert the below expression on the chart’s ItemColorSet property.

ItemColorSet = [Color.Blue, Color.OrangeRed]

As per the above expression, now the chart will appear with blue and orange-red colors as shown below:

This is how to customize the color within the Power Apps chart. Bike Sales Report

Add multiple series to a Power Apps chart

In this section, we will see how to add multiple data series to a Power Apps chart. While working with the Power Apps column chart and line chart, we find a property named ‘Number of series’.

Note:

In Pie chart the property ‘Number of series’ is not avilable.

Let’s see how to work with the multiple series within a column chart or line chart. To implement this, we are going to use the above Power Apps collection named ‘CollSalesReport‘ that contains certain months and their respective profit and loss data.

• On the Power Apps screen, add a column chart and connect it with the mentioned collection.
• We can see that instead of both profit and loss, the column chart only displays the profit data as shown below:

• To display both the profit and loss data, we need to increase the ‘NumberOfSeries‘ property of the chart.

NumberOfSeries = 2

This is how to work with the multiple series within the Power Apps chart.

Grouping data in a Power Apps Chart

In Power Apps, there is a function named ‘Group by’ that provides a table containing items that have been grouped together based on the values in one or more columns.

Here, we will see how to build a chart within the Power Apps that will display group data. We have prepared a data table using a certain SharePoint list based on bike sales as shown below:

In the above screenshot, we can see the data table has some repeated bike names. As per the requirement, we will group the bike names and display their total quantity.

To implement this requirement, the following steps are:

• Let’s add a Power Apps pie chart to the screen.
• Connect that chart to the Sharepoint list data source. (i.e., BikeSales).
• We can see that the pie chart will appear as shown below:

• To make the above data in a group, insert the below expression on the chart’s Items property.

Items = AddColumns(
    GroupBy(
        BikeSales,
        "Title",
        "Grouped Bike"
    ),
    "Total Quantity",
    Sum(
        'Grouped Bike',
        Qty
    )
)

Where,

• BikeSales is the name of the SharePoint list data source.
• “Title” is the name of the SharePoint list column to group the data by.
• “Grouped Bike” is the name of a new column that will be used for the nested grouped data.
• “Total Quantity” is the name of the unique column as we are adding a new column.
• Qty is the name of the SharePoint list number column based on which the calculation will take place.

Once the formula is applied, we can see that the chart will appear with the grouped data as shown below:

This is how to use group by() and group the data to visualize a Power Apps chart.

Visualize Power Apps Chart based on filter

In this section, we’ll look at how to create a Power Apps chart that visualizes data depending on filtered data.

We’ll utilize the Power Apps data table shown above to present data from a specific SharePoint list. Where we will insert a dropdown control for the user to select the bike model. The data will be filtered and shown in the data table based on the bike model. We will create a Power Apps column chart using the filtered data.

The following steps must be taken to implement this requirement:

• On the above Power Apps screen, add a dropdown control and place the control on top of the data table.
• To eliminate duplicate data and display the bike model, add the following expression to the Items property of the dropdown control.

Items = Distinct(BikeSales,Title)

Where BikeSales is the name of the SharePoint data source list and Title is the name of the SharePoint column in which the bike models are stored.

• To filter the Power Apps data table based on the dropdown selection, insert the below expression on the data table’s Items property.

Items =Filter(
    BikeSales,
    Title = BikeModel_dd.Selected.Value
)

Where BikeModel_dd is the name of the Power Apps dropdown control.

• Next, we will add a column chart to the above screen and place it beside the Power Apps data table control.
• To visualize the chart based on the filtered data, insert the below expression on the Items property of the Power Apps column chart.

Items = Filter(
    AddColumns(
        GroupBy(
            BikeSales,
            "Title",
            "GroupBike"
        ),
        "BikeModel",
        Coalesce(
            Sum(
                GroupBike,
                Qty
            ),
            0
        )
    ),
    Title = BikeModel_dd.Selected.Value
)

Where GroupBike is the name of the new column that we have added.

On the above column chart, we can see that it is visualizing the data of the selected item with their respective total quantities.

Similarly, if we select another item, the chart, and the data table will display the data accordingly. (Ex: Selected item is Harley-Davidson)

This is how to visualize a Power Apps chart based on filtered data.

Conclusion

From this Power Apps Tutorial, we learned how to work with Power Apps Chart control. Also, we have covered and implemented the below topics such as:

• What is Power Apps chart control
• Different Types of Chart Controls in Power Apps
• Build Power Apps charts from a SharePoint list
• Create Power Apps chart from a collection
• Add multiple series to a Power Apps chart
• Apply color to a Power Apps Chart
• Grouping data in a Power Apps chart
• Visualize Power Apps Chart based on filter

You may also like the following Power Apps tutorials:

• Power Apps Pie Chart– Let’s Build It
• Power Apps Modern Dropdown Control
• Delete Power Apps Customize Form from SharePoint List
• Power Apps Select All Checkbox in Gallery