Power Apps Column Chart – How to Build it

The Power Apps column chart is a data visualization component included in Microsoft Power Apps, a low-code platform for developing business apps. This Power Apps tutorial will explain all you need to know about column chart controls in Power Apps.

Recently, we are asked by one of our clients to build a column chart within the Power Apps canvas app. To fulfill the requirement, I have created a column chart via Power Apps Chart control. Keep reading this tutorial to get ideas on how to create a column chart using the Power Apps chart control.

Along with this, we will cover what are the Power Apps column chart properties, what the different types of components come under a column chart, how to visualize filtered data via Power Apps column chart, how to display column chart based on condition, working with legends, series, X-axis label, and so on.

Let’s start! Happy exploring!

What is a Power Apps Column Chart

The Power Apps column chart is a graphical representation of data that uses vertical bars or columns to illustrate the value of each data point within the Canvas app. With the Power Apps column chart, we can display data in the form of graphs with x- and y-axes.

To add a column chart from the Power Apps Chart control, follow the below steps:

• Build a blank Power Apps canvas app or you can use any existing canvas app.
• On the canvas app screen, navigate to Inserts (on the top nav bar) > Expand ‘Charts‘ > Column chart.
• Once you selected the column chart option, it will be added to the Power Apps screen by visualizing the sample data.

This is how to add a Power Apps column chart to a canvas app screen.

Properties under Power Apps Column Chart

Before working with a Column chart within the Power Apps, let’s discuss some important properties that come under a PowerApps Column chart. Such as:

• Items: The data source or raw data that displays in a control such as a gallery, list, or chart.
• NumberOfSeries: The number of columns of data reflected in a column or line chart.
• GridStyle: Whether a column chart displays its x-axis, y-axis, both, or none.
• ItemColorSet: It defines each data point’s color in a chart.
• ItemsGap: It defines the distance between columns.
• Markers: The value of each data point is displayed in a column chart.
• MarkerSuffix: When the Markers attribute is set to true, text displays after each value in a column chart.
• MinimumBarWidth: The minimum acceptable column width in a column chart.
• OnSelect: When a user hits or clicks a control, actions are taken.
• SeriesAxisMax: The maximum y-axis value for a column chart.
• SeriesAxisMin: A integer that sets the minimum y-axis value for a column chart.
• XLabelAngle, YLabelAngle: The angle of a column chart’s labels below the x-axis and the labels next to the y-axis respectively.

Build Power Apps column Chart from SharePoint list

Here, we will see how to build a column chart within the Power Apps canvas app using SharePoint list data.

We have a SharePoint list named ‘Products Revenue‘ having columns such as Total Sales, Gross Profit, Operating Expenses, and Net business result as shown below. Using this SharePoint list, we will create a Power Apps column chart.

To create a column chart within the Power Apps canvas app, the following steps are:

• Connect the above SharePoint list to the Canvas app.
• On the canvas app screen, add a Power Apps column chart. By default, the column chart will appear with sample data.
• Select the column chart, and navigate to the Items property under the Properties panel.
• Select the SharePoint data source list by expanding the down arrow. That’s it.

• Once the SharePoint list is connected, we can see the Power Apps column chart will appear as shown below:

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

Power Apps Column Chart label or X-axis label

Here we will see how to set the label in a Power Apps column chart. A column chart labels that tell you what each bar means. We can see the above column chart where each bar is represented by Product ID i.e., 1, 2, 3, etc.

Let’s set the label or X-axis label of the Power Apps column chart to the Product’s Title. As a result, the column chart will display the ‘Gross Profit‘ based on each product (Title).

To set the X-axis label on the Power Apps column chart, the following steps are:

• On the above screen, select the column chart.
• Navigate to Advanced, we can find Labels under DATA.
• Select ‘Title‘ by expanding the labels.

Similarly, you can set any column as your column chart label as per the requirement. This is how to set the x-axis label within the Power Apps column chart.

Power Apps column Chart multiple series

Multiple series are used to display information from multiple sources. Even though the SharePoint list contains a lot of data, the above Power Apps column chart only displays the Gross Profit. The reason for this is that it portrays data from a single data set.

Let’s see how to work with multiple series within a Power Apps column to display the multiple datasets in a single column chart i.e., Total sales, Operating Expenses, and Net business result.

To work with this functionality, the following steps are:

• Select the column chart and navigate to Advanced.
• Under DATA, set the Series1, Series2, Series3, and Series4 as Total Sales, Gross Profit, Operating Expenses, and Net business result respectively.

• Again, navigate to Properties and set the NumberOfSeries as 4.

NumberOfSeries = 4

Once the number of series set to 4, the Power Apps column chart will display with all data as shown below:

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

Power Apps column Chart color

In this section, we will see how to design a Power Apps column chart with different colors. To set the color for each of the chart items, the following steps are:

• Select the above Power Apps column chart.
• Insert the colors(as per the requirement) within the chart’s ItemColorSet property. You can set the color by RGBA format or by using the below expression:

ItemColorSet = [
    Color.DeepSkyBlue,
    Color.Purple,
    Color.Yellow,
    Color.ForestGreen
]

Once we set the ItemColorSet, each bar will come with the respective color as shown below:

This is how to add item color to a Power Apps column chart.

Apply Condition in Power Apps Column Chart

In this Section, we will see how to apply a condition within a Power Apps Column chart. Let’s build a column chart that will visualize the total sales per each item as shown below:

On the above Power Apps column chart, we will apply condition. As per the condition, if the Total Sales is greater than 50,000 then it will visualize as Red color otherwise it will visualize as yellow-green.

To apply the condition on the above column chart, insert the below expression on the chart’s ItemColorSet property.

ItemColorSet = ForAll(
    'Products Revenue',
    If(
        'Total Sales' > 50000,
        Color.OrangeRed,
        Color.YellowGreen
    )
)

Once the formula is applied, the Power Apps column chart will appear as below:

This is how to apply condition to the Power Apps column chart.

Calculate Power Apps column Chart Percentage

In this section, we will see how to calculate percentages within the Power Apps column chart.

As per our requirement, we are going to calculate the gross profit percentage based on total sales and gross profit. Then we will visualize this calculated percentage value with the Power Apps column chart.

To implement this we will use the above Power Apps column chart and the following steps are:

• On the above screen, select the column chart
• Insert the below expression on the Items property of the Power Apps column chart.

Items = AddColumns(
    'Products Revenue',
    "Gross Profit Percentage",
    Text(
        Value('Gross Profit' / 'Total Sales') * 100,
        "[$-en-US]#.00"
    )
)

Where “Gross Profit Percentage” is the name of the new column name to store the calculated percentage value.

• Again, select the column chart and set Series1 as Gross Profit Percentage in the Advanced section.
• Similarly, set the MarkerSuffix as the below expression:

MarkerSuffix = "%"

This is how to calculate and display percentage value within the Power Apps.

Conclusion

From this Power Apps tutorial, we learned all about how to work with the Power Apps column chart based on different scenarios. Also, we have discussed below topics such as:

• What is Power Apps Column Chart?
• What are the different properties of the Power Apps column chart?
• How to build a Power Apps column chart from the SharePoint list?
• How to add a label or x-axis label to the Power Apps column chart?
• How to add multiple series on a Power Apps column chart?
• How to add color to a column chart within the Power Apps?
• Build Power Apps column chart based on condition.
• Visualize the Power Apps column chart with the calculated percentage value.

You may like the following Power Apps tutorials:

• How to Add a Time Picker in the Power Apps Canvas App?
• Power Apps Rich text editor control
• Select First Item in a Power Apps Gallery
• How to add text input to Power Apps collection?