20+ More Power Apps Chart Types With QuickChart

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.

Area ChartDoughnut ChartQR Code
Bar ChartGauge ChartRadar Chart
Box & Violin ChartGraphViz ChartRadar Chart
Bubble ChartLine ChartScatter Chart
Clustered Bar ChartPie ChartSparkline
Column ChartPolar ChartStacked Column Chart
Combo ChartProgress BarWord Cloud




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:

SalespersonPeriodSalesAmount
AmandaSeptember 2021250,000
DavidSeptember 2021 340,000
JesseSeptember 2021 220,000
LeonSeptember 2021 50,000
MatthewSeptember 2021 100,000
SarahSeptember 2021 310,000
TeresaSeptember 2021 230,000
XavierSeptember 2021 0




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.

SalespersonPeriodSalesAmount
AmandaSeptember 2021250,000
DavidSeptember 2021 340,000
JesseSeptember 2021 220,000
LeonSeptember 2021 50,000
MatthewSeptember 2021 100,000
SarahSeptember 2021 310,000
TeresaSeptember 2021 230,000
XavierSeptember 2021 0
AmandaOctober 202160,000
DavidOctober 2021 150,000
JesseOctober 2021 200,000
LeonOctober 2021 260,000
MatthewOctober 2021 150,000
SarahOctober 2021 190,000
TeresaOctober 2021 100,000
XavierOctober 2021 0
AmandaNovember 2021230,000
DavidNovember 2021 110,000
JesseNovember 2021 210,000
LeonNovember 2021 60,000
MatthewNovember 2021 260,000
SarahNovember 2021 160,000
TeresaNovember 2021 200,000
XavierNovember 2021 0



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.Result),
         "'"&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.Result),
         "'"&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.

Matthew Devaney

Subscribe
Notify of
guest
15 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Shahar Gur-Ari
Shahar Gur-Ari
1 year ago

Amazing! Thank you!! Can’t wait to test it out, I’ll update

BIODUN YUSUF
BIODUN YUSUF
1 year ago

This is so awesome matt.

Takbir
Takbir
11 months ago

Thanks Matt.This is a wonderful thing. But I’m having problem when I try to use scatter type and connect x and y axis values โ€‹โ€‹with DataCardValue in powerapps form. I’m sure you have a solution for this problem. Thank you

Drew
Drew
3 months ago

Matthew, this is fantastic. If I have those 2 values within my data source, how do I assign them to the X and Y values. For example, Risk Score would be the X and Effort Score would be the Y.

“https://quickchart.io/chart?c=”&EncodeUrl(“{
  ‘type’: ‘scatter’,
  ‘data’: {
   ‘labels’: [“&Concat(‘Table1’,”‘”&EpicID&”‘,”)&”],
   ‘datasets’: [
    {
     ‘label’: ‘Dataset 2’,
     ‘backgroundColor’: ‘rgba(54, 162, 235, 0.5)’,
     ‘borderColor’: ‘rgb(54, 162, 235)’,
     ‘borderWidth’: 1,
    ‘data’: [
     {
      ‘x’: 10,
      ‘y’: 10
     }
    ]
    

Elbert Q Blakely
Elbert Q Blakely
10 months ago

Terrific work! Can you do this with a collection instead of a sharepoint table?

Elbert Blakely
Elbert Blakely
9 months ago

Thanks – using a collection is working really well for me. The graphs can be fine tuned in a lot of different ways. One more question: I have the graph image file embedded in an html control and it is displayed. But when I create a pdf of the html (using a flow), the graph image doesnโ€™t show. Do you have any advice on this?

Elbert Q Blakely
Elbert Q Blakely
9 months ago

Thanks – I’ll check it out!

Aravind
Aravind
6 months ago

This is just great! Can we also show the count of the records to make it more clear?

Drew
Drew
3 months ago

Does anyone know how to replicate this set up with the Scatter Plot diagram where it uses both an X and Y field from the data source?