Beyond Built-in Charts: Using QuickChart for Custom Visuals in Power Apps

Power Apps gives you column, line, and pie charts out of the box. They work well for simple views, but they don’t cover every data story you might want to tell. If you need a radar chart to compare skills, a doughnut chart showing budget allocation, or a gauge for project progress, you’ll quickly hit the built‑in limits.

The QuickChart API lets you render over 20 chart types as images, and you can display them inside a Power Apps Image control. The chart definition – type, data, colours, labels – is passed as a JSON string inside the image URL. This article walks you through a real‑world scenario: a regional project dashboard that uses a data source, live filtering, and multiple chart types.

Scenario: Regional Project Dashboard

A PMO team oversees projects across three regions. They want a compact dashboard that shows:

• Bar chart – Revenue per project for the selected region.
• Gauge chart – Average progress of active projects.
• Radar chart – How projects score on risk, budget variance, and timeline deviation.

The app uses a Dataverse table named ProjectMetrics with the following columns:

You can use SharePoint if you prefer; the Power FX code changes only in the datasource name.

Step 1: Build a Static QuickChart Image

First, test the API with a simple static chart. Insert an Image control (call it imgChart). In its Image property, paste this URL:

"https://quickchart.io/chart?c="&EncodeUrl("{'type':'bar','data':{'labels':['Alpha','Beta','Gamma'],'datasets':[{'label':'Revenue','data':[520000,480000,610000]}]}}")

The chart appears immediately. The EncodeUrl function ensures special characters in the JSON are URL‑safe. The JSON string uses single quotes (Power Apps friendly) instead of double quotes.

Step 2: Load Data from Your Source

Replace static labels and data with values from the ProjectMetrics table. Use the Concat function to turn table rows into a comma‑separated string.

"https://quickchart.io/chart?c="&EncodeUrl("{'type':'bar','data':{'labels':["&Concat(ProjectMetrics,'"'"&ProjectName&"'",')&"],'datasets':[{'label':'Revenue','data':["&Concat(ProjectMetrics,Text(Revenue)&",")&"]}]}}")

Notice the nested quotes: inside the URL, each label string needs double quotes. The '"' sequence produces a double quote in the resulting string.

Step 3: Add a Region Filter (Dropdown)

Place a Dropdown control above the image, set its Items to Choices(ProjectMetrics.Region). Rename it ddRegion.

Now modify the chart URL to filter data for the selected region. Use the Filter function:

"https://quickchart.io/chart?c="&EncodeUrl("{'type':'bar','data':{'labels':["&Concat(
  Filter(ProjectMetrics, Region = ddRegion.Selected.Value),
  '"'"&ProjectName&"'","
)&"],'datasets':[{'label':'Revenue','data':["&Concat(
  Filter(ProjectMetrics, Region = ddRegion.Selected.Value),
  Text(Revenue)&","
)&"]}]},"&
"{'options':{'title':{'display':true,'text':'"&"Revenue by Project - "&ddRegion.Selected.Value&"'"}}}"&
"}")

The chart now updates when the user picks a different region. The options block adds a dynamic title.

Step 4: Switch Chart Types

One of QuickChart’s strengths is variety. You can change the chart by altering the type field. To let users pick a chart type, add a second dropdown (ddChartType) with items like ["bar","horizontalBar","radar","doughnut","polarArea","gauge"].

Update the Image property to use ddChartType.Selected.Value as the type:

"https://quickchart.io/chart?c="&EncodeUrl("{'type':"&"'"&ddChartType.Selected.Value&"'"&",'data':{'labels':["&Concat(
  Filter(ProjectMetrics, Region = ddRegion.Selected.Value),
  '"'"&ProjectName&"'","
)&"],'datasets':[{'label':'Revenue','data':["&Concat(
  Filter(ProjectMetrics, Region = ddRegion.Selected.Value),
  Text(Revenue)&","
)&"]}]}}")

Note: Not every chart type works with two‑dimensional data. For instance, a radar chart expects one dataset per axis. You will need to adjust the data structure when switching between chart families (see QuickChart docs for JSON schemas).

Step 5: Build a Gauge Chart for Progress

A gauge chart is great for showing overall project health. Use the average progress across filtered projects.

First, compute the average in your app (add a label control with this formula):

Average(Filter(ProjectMetrics, Region = ddRegion.Selected.Value), Progress)

Store it in a variable, e.g. Set(varAvgProgress, ...). Then build the gauge URL:

"https://quickchart.io/chart?c="&EncodeUrl("{'type':'solidgauge','data':{'datasets':[{'data':["&Text(varAvgProgress)&"]}]},'options':{'title':{'display':true,'text':'Avg Progress'},'gauge':{'type':'circular','startAngle':0,'endAngle':360}}}")

The gauge behaves like a speedometer. You can customise the colour range with the format property.

Performance and Security Considerations

• External API calls – QuickChart is a public HTTPS service. Every chart request causes an outbound network call. Keep your app’s data volume reasonable (under a few hundred rows) to avoid slow load times.
• Data sensitivity – The entire chart definition (including labels and values) is sent as part of the URL. Never include personally identifiable information (PII) or secret business data. Consider using QuickChart’s self‑hosted option if privacy is a concern.
• URL length limits – The combined URL must stay under ~8 KB in Power Apps. If you have many data points, aggregate them before passing to the API (e.g., show top 10, use averages).
• Delegation – Concat and Filter used in the URL pattern only work with delegable data sources if the underlying query is delegable. Check that your SharePoint or Dataverse queries can handle the row count you expect.

Common Mistakes and Troubleshooting

Wrap‑Up and Final Recommendation

QuickChart is a lightweight, code‑first way to break out of the three‑chart limit in Power Apps. You can add radar, doughnut, polar area, gauge, word cloud, and many more types without custom components or heavy licensing. Start with a simple bar chart, gradually introduce filtering, and then experiment with different chart families.

The pattern – building a JSON string and feeding it into the Image property – stays the same regardless of chart type. This makes it easy to maintain and extend.

For production use, be mindful of data privacy and API limits. If you need offline capability or want to avoid external calls, evaluate QuickChart’s self‑hosted container. For most business dashboards, the free tier (a few thousand requests per day) is sufficient.

References

• Original article by Matthew Devaney: 20+ More Power Apps Chart Types With QuickChart
• QuickChart Documentation: https://quickchart.io/documentation/
• Power Apps EncodeUrl function: Microsoft Learn