20+ More Power Apps Chart Types With QuickChart

Charts are a useful way to allow readers to quickly understand data and identify relationships/patterns. In Power Apps we only have a few chart types available (column, line, pie) and a limited set of options for styling. Often when I want to use a particular chart type its not available. With QuickChart we can extend Power Apps to use over 20 different chart types and have more choice over their appearance.

In this article I will show you how to add more Power Apps chart types by using Quickchart.

Table of Contents:
What is the QuickChart API?
Introduction: The Sales Tracker App
Setup The SharePoint List
Select A Chart Type
Generate A Chart Image
Load The Chart With SharePoint List Data
Make The Chart Interactive With A Dropdown

What Is The QuickChart API?

QuickChart is an API that can be used inside Power Apps to generate an image of a chart. With QuickChart there are more chart types and style options available than Power Apps very limited set.

To make a chart we can place this URL in the Image property of a Power Apps image control and it will appear on the screen. The URL contains both the data to be included in the chart and information about how to format the chart.

"https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}"

Power Apps only has 3 standard chart types (column, line, pie). Quickchart enables us to use all 21 chart types listed below.

Introduction: The Sales Tracker App

Managers at an insurance company use the Sales Tracker app to see how salespeople are performing. The Manager selects a specific month from a dropdown and a bar chart displays each salesperson’s name along with their monthly sales volume.

Setup The SharePoint List

Create a SharePoint list called Monthly Sales with the following columns:

• Salesperson (single-line text)
• Period (single-line text)
• SalesAmount (number)

Load the SharePoint list with this data:

Select A Chart Type

Go to QuickChart and open the Chart Gallery page to see all the possible chart types we could add to Power Apps. Choose the Horizontal chart type.

The Horizontal chart page includes a sample JSON which holds the chart information. Copy and paste this code into a text editor such as Windows Notepad.

Find and replace and double-quotation marks (“) with a single-quotation mark (‘). We want to use this JSON to define the chart in Power Apps but the problem is double-quotation marks will be interpreted as a text string. Fortunately JSON treats both single-quotation marks and double-quotation marks the same way.

Generate A Chart Image

Open Power Apps Studio and create a new app from blank. Insert an Image onto the center of the screen.

Write this code in the Image property of the Image. It is a URL containing two parts: a base URL and a JSON with the chart definition. Notice JSON code we prepared inside of our text editor is wrapped in an EncodeUrl function to replace any non-alphanumeric values into hexadecimal values that can be read inside of a web browser.

"https://quickchart.io/chart?c="&EncodeUrl("{
   'type': 'horizontalBar',
   'data': {
     'labels': [
       'January',
       'February',
       'March',
       'April',
       'May',
       'June',
       'July'
     ],
     'datasets': [
       {
         'label': 'Dataset 1',
         'backgroundColor': 'rgba(255, 99, 132, 0.5)',
         'borderColor': 'rgb(255, 99, 132)',
         'borderWidth': 1,
         'data': [
           -32,
           62,
           64,
           41,
           -31,
           -32,
           87
         ]
       },
       {
         'label': 'Dataset 2',
         'backgroundColor': 'rgba(54, 162, 235, 0.5)',
         'borderColor': 'rgb(54, 162, 235)',
         'data': [
           9,
           -100,
           -13,
           64,
           -57,
           26,
           20
         ]
       }
     ]
   },
   'options': {
     'elements': {
       'rectangle': {
         'borderWidth': 2
       }
     },
     'responsive': true,
     'legend': {
       'position': 'right'
     },
     'title': {
       'display': true,
       'text': 'Chart.js Horizontal Bar Chart'
     }
   }
 }")

After the code is input a sample chart will appear inside of the Image.

Load The Chart With SharePoint List Data

Managers at the insurance company review performance by looking at a chart showing each salesperson and their monthly sales. Our next goal is to update the sample chart with sales data. Open the data tab and add the Monthly Sales SharePoint list as a datasource.

Then go to the Image property of the sample chart and change it to this code instead. The default labels and data values have been replaced with information from the Monthly Sales SharePoint list. We use the Concat function to change the table data into a text-string so it can be passed into the URL.

"https://quickchart.io/chart?c="&EncodeUrl("{
   'type': 'horizontalBar',
   'data': {
     'labels': ["&Concat('Monthly Sales',"'"&Salesperson&"',")&"],
     'datasets': [
       {
         'label': 'Dataset 2',
         'backgroundColor': 'rgba(54, 162, 235, 0.5)',
         'borderColor': 'rgb(54, 162, 235)',
         'borderWidth': 1,
         'data': ["&Concat('Monthly Sales',"'"&SalesAmount&"',")&"]
       }
     ]
   },
   'options': {
     'elements': {
       'rectangle': {
         'borderWidth': 2
       }
     },
     'responsive': true,
     'legend': {
       'display': false
     },
     'title': {
       'display': true,
       'text': 'Sales Amount by Salesperson'
     }
   }
 }")

Now the chart shows our actual sales data from the SharePoint list.

Make The Chart Interactive With A Dropdown

We can further improve our app by allowing the manager to pick a month from a dropdown and having the chart update to reflect that month’s sales data. Place a new dropdown control above the chart and and label with the text “Choose Month.”

Use this code in the Items property of the dropdown to get a list of unique months/years with sales data from the Monthly Sales SharePoint list.

Distinct('Monthly Sales', Period)

Currently our SharePoint list contains only data for September 2021. Add this data for October 2021 and November 2021 then refresh the datasource in Power Apps. Now September 2021, October 2021 and November 2021 will appear in the dropdown.

Update the Image property of the chart image with this code. We use the Filter function to select only sales data that belongs to the selected month/year in the dropdown.

"https://quickchart.io/chart?c="&EncodeUrl("{
 'type': 'horizontalBar',
 'data': {
     'labels': ["&Concat(
         Filter('Monthly Sales', Period=drp_Month.Selected.Value),
         "'"&Salesperson&"',"
     )&"],
     'datasets': [
         {
             'label': 'Dataset 2',
             'backgroundColor': 'rgba(54, 162, 235, 0.5)',
             'borderColor': 'rgb(54, 162, 235)',
             'borderWidth': 1,
             'data': ["&Concat(
         Filter('Monthly Sales', Period=drp_Month.Selected.Value),
         "'"&SalesAmount&"',"
     )&"]
         }
     ]},
     'options': {
         'elements': {
         'rectangle': {
             'borderWidth': 2
         }
         },
         'responsive': true,
         'legend': {
         'display': false
         },
         'title': {
         'display': true,
         'text': 'Sales Amount by Salesperson'
         }
     }
 }"
 )

We’re done. The chart can now be controlled with a dropdown to show data for a chosen month.

Questions?

If you have any questions or feedback about 20+ More Power Apps Chart Types With QuickChart please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.