Power Apps Line Chart – How To Build It

The Power Apps Line chart is a graphical component provided in Microsoft Power Apps, a low-code platform for constructing business apps. This Power Apps tutorial will guide you through everything you require to know about Power Apps line chart controls.

One of our clients recently asked us to create a line chart on the Power Apps canvas app. I constructed a column chart using the Power Apps Chart control to meet the need. Continue reading to learn how to build a line chart using the Power Apps chart control.

Along with this, we will discuss what are the different types of properties available in a Power Apps line chart, how to build a line chart using the Power Apps collection, how to rename a line chart within the Power Apps canvas app, who to customize with colors in a line chart, how to filter a line chart within Power Apps, and so on.

Happy learning!

What is a Power Apps line Chart?

The Power Apps line chart is used to display and analyze trends over time by connecting data points with lines. Typically, we can display data in the form of graphs with x- and y-axes using the Power Apps line chart.

In Power Apps, it allows adding a line chart to the application to enhance the user interface to show data from multiple data sources like SharePoint lists, SQL databases, Excel files, and more. The line chart may be customized to meet individual needs, including colors, labels, axes, legends, and other formatting choices.

Follow the instructions below to add a line chart using the Power Apps Chart control.

• Open an existing canvas app or build a blank canvas app to work with the Pwer A[[s line chart. (Here we have created a blank canvas app)
• On the Power Apps canvas app screen, go to Insert tab > expand Charts > Line Chart.
• When we click the column chart option, the sample data will be visualized and displayed on the Power Apps interface as shown below:

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

Properties of Power Apps Line Chart

Before we start to work with a line chart in Power Apps, let’s go over some of the key properties of a PowerApps Column chart. Such include:

• Items: The data source for a control such as a gallery, list, or chart.
• NumberOfSeries: The number of columns of data portrayed in a line chart.
• Color: It defines the text color in a control.
• DisplayMode: If the control enables user input (Edit), shows data exclusively (View), or is disabled (Disabled).
• GridStyle: Whether a line chart displays its x-axis, y-axis, both, or none.
• ItemColorSet: Each data point’s color in a chart.
• Markers: The value of each data point is presented in a line chart.
• OnSelect: When a user taps or clicks a control, actions are taken.
• XLabelAngle, YLabelAngle: The angle of a line chart’s labels below the x-axis and next to the Y-axis respectively.
• YAxisMax, YAxisMin: The maximum and minimum values of the Y-axis for a line chart.

Create Power Apps line Chart from a SharePoint list

In this section, we will see how to create a line chart by using a SharePoint list.

There is a SharePoint list named ‘Products Revenue‘ having such columns as Total Sales, Gross Profit, Operating Expenses, and Net business result as shown below. Now, we will create a Power Apps line chart using that SharePoint list data source, To view the data graphically.

To build a line chart from the above SharePoint list, the following steps are:

• Connect the SharePoint list to the Power Apps canvas app.
• Add a line chart to the canvas app screen from the Power Apps chart control.
• Connect that line chart to the SharePoint list.

Items = 'Products Revenue'

Once we connect the chart with the data source the chart will fetch the data and appear as shown below:

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

Power Apps line Chart Rename

Here we will see how to rename a line chart within the Power Apps. If we observe the above line chart, we can see the chart has a default named ‘Chart Title‘. But, Power Apps chart control allows us to give a customized name to the chart.

To rename the Power Apps line chart the following steps are:

• Select the Title of the Power Apps line chart.
• Give a name as per the requirement. (Ex: Product Revenue by Gross Profit)
• Click Enter. The title will be reflected on the Power Apps line chart.

This is how to rename a Power Apps Line chart.

Power Apps line Chart multiple lines

Here, we will see how to portray a Power Apps line chart with multiple lines. That means we can see that the above line chart is only displaying the Gross Profit of each product graphically. But the requirement is to display all the data within a Power Apps line chart such as Total Sales, Operating Expenses, and Net business result.

To display all those data within a single Power Apps line chart, we are going to use the above chart and the following steps are:

• Select the above line chart.
• Go to the Advanced section.
• Set Series1, Series2, Series3, and Series4 as each data column respectively. (i.e., Gross Profit, Total Sales, Operating Expenses, and Net business result.)

• Set the chart’s ‘Number Of Series‘ property as 4.

NumberOfSeries = 4

Now, the line chart will appear with multiple lines or series as shown below:

This is how to add multiple lines or series to a Power Apps line chart.

Build a Power Apps line Chart from a Collection

Here, we will see how to build a line chart from a Power Apps collection. That is, we will create a collection within Power Apps and then use the collection to visualize the data graphically using a Power Apps line chart.

To build a Power Apps line chart from a collection, the following steps are:

• On the Power Apps screen, add a button control.
• Insert the below expression into the button’s OnSelect property to create a collection when the button is clicked.

OnSelect = ClearCollect(
    ColPopulation,
    {
        Year: 2018,
        Male: 25632,
        Female: 17856,
        Kid: 1236
    },
    {
        Year: 2019,
        Male: 32532,
        Female: 27365,
        Kid: 7836
    },
    {
        Year: 2020,
        Male: 24007,
        Female: 23604,
        Kid: 8790
    },
    {
        Year: 2021,
        Male: 21025,
        Female: 19870,
        Kid: 4256
    },
    {
        Year: 2022,
        Male: 27852,
        Female: 25265,
        Kid: 6563
    },
    {
        Year: 2023,
        Male: 20232,
        Female: 16560,
        Kid: 9856
    }
)

Where ColPopulation is the name of the Power Apps collection that we have created.

• Next, add a line chart from the Power Apps chart control.
• Connect that line chart to the Collection i.e., ColPopulation.
• Set the NumberOfSeries property of the chart as 3. Now we can see the line chart will appear as shown below:

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

Power Apps line Chart x-axis labels

The labels in a chart explain what each bar represents. Here, we will see how to set a label or x-axis label within a Power Apps line chart.

Initially, when we build a line chart we observe that the chart’s label is represented as 1,2,3, etc. That defined the Item’s ID as shown below:

But it seems difficult to get an idea of what the chart is portraying. In such a case, we can set the label to a Power Apps line chart.

To work with this functionality, the following steps are:

• Select the Power Apps line chart.
• Go to the Advanced section of the control.
• Set the Labels as Title.

Now, the chart will appear with the item’s title as x-axis labels.

This is how to set the x-axis labels within a Power Apps line chart.

Power Apps line Chart markers

In a Power Apps line chart, markets are the data points that are connected by a straight line. As a result, the data are graphically represented by a connected line.

In a Power Apps line chart, there is a toggle for whether the Markers will be visible or disabled.

The screenshot below shows the differences between visible markers and disabled markers.

This is how to set markers within a Power Apps line chart.

Power Apps line Chart item color set

Here, we will see how to set an item color within a Power Apps line chart. Power Apps chart control allows us to customize the chart item color as per the requirement.

To set the customized colors to a Power Apps line chart, the following steps are:

• On the Power Apps line chart control, select the ‘ItemColorSet’.
• Within that property, we can insert the color code in RGBA format or insert the color name directly. (that format is shown below):

ItemColorSet = [Color.Purple, Color.DarkOrange, Color.DeepPink, Color.GreenYellow]

This is how to customize a line chart item with the required color.

Power Apps line Chart Filter

In this section, we will see how to filter a Power Apps line chart. That means we will visualize a Power Apps line chart based on filtered data.

As per the requirement, when the user clicks on a dropdown control (that contains the list of products’ titles) the data will be filtered as per the selected product and visualized in the Power Apps line chart.

To implement this scenario, we are going to use the above Power Apps line chart and the following steps are:

• On the Power Apps screen, add a dropdown control.
• Insert the below expression, on the dropdown’s Items property.

Items = Distinct('Products Revenue',Title)

• Again, insert the below expression on the chart’s Items property to display the filter data.

Items = Filter('Products Revenue', Title = Dropdown1.Selected.Value)

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

That’s it! Let’s preview the app and while selecting an item from the dropdown control, we can see that the respective item got filtered and visualize their data.

This is how to filter a Power Apps line chart.

Conclusion

From this Power Apps tutorial, we have learned all about the Power Apps line chart such as:

• What is a Power Apps line Chart?
• What properties come under a Power Apps line Chart?
• Build a Power Apps line Chart from a SharePoint list.
• How to rename a Power Apps Line Chart?
• How to add multiple lines to a Power Apps line Chart?
• Create a Power Apps line Chart from a collection
• Power Apps line Chart x-axis labels
• Power Apps line Chart markers
• Power Apps line Chart item color set
• How to filter a Power Apps line Chart?