Unanswered

What are some of the best ways to design charts in Power Apps?

(1) Share

Report

Posted on by MelaninCoded

Hi,

I'm looking for some of the best approaches to building or designing charts in Power Apps.
The out of box charts do not provide enough options and improvising using Power Apps' built in control can be clunky.

What are some of the best ways to design charts in Power Apps?

While researching I came across this quickchart io site that came a bit close and was wondering what others recommend on here.

Thank you.

Sample code:
//The expense of the item/Total amount of the budget

With((Percentage: ThisItem.Expense/Sum(Filter(ExpenseByCategoryCollect, BudgetId =Gallery1.Selected.BudgetId),Expense)*100},

"https://quickchart.io/chart?c=" & EncodeUrl(

type: 'radialGauge',

data: {

datasets: [{

data: ["& Percentage &"],

backgroundColor: getGradientFillHelper( 'horizontal',[' red', 'blue']),

}]

options:{

domain: [0, 100],

trackColor: '#f8f7f9',

centerPercentage: 80,

centerArea: {

text: (val) => val + '%',

}
}"))

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

Suggested answer

jpespena 335 on at

Like (1)

Report
Hi MelaninCoded,

I frequently use Quickcharts on creating visualizations for apps that I build. Just need some fixing on your existing code:

- With() function should start with With({ not With((

- Remove extra space in ' red' in backgroundColor

- Remove )1 after the dataset which both cause error.

It should be like this:

With({Percentage: ThisItem.Expense/Sum(Filter(ExpenseByCategoryCollect, BudgetId =Gallery1.Selected.BudgetId),Expense)*100}, "https://quickchart.io/chart?c=" & EncodeUrl( "{ type: 'radialGauge', data: { datasets: [{ data: ["& Percentage &"], backgroundColor: getGradientFillHelper( 'horizontal',['red', 'blue']), }] }, options:{ domain: [0, 100], trackColor: '#f8f7f9', centerPercentage: 80, centerArea: { text: (val) => val + '%', }, } }"))

Was this reply helpful? Yes No
Suggested answer

timl 36,383 Super User 2025 Season 2 on at

Like (1)

Report

Hi MelaninCoded

I would also recommend that you take a look at the Canviz chart components.

https://ogcanviz.github.io/ChartComponents/#/

Was this reply helpful? Yes No
Verified answer

Mark Nanneman 991 Super User 2025 Season 2 on at

Like (1)

Report

Using formulas like what you have in image controls is an interesting method--of course it all depends on the external service being available.

Integrating PowerBI charts is a powerful option--there's a bit of a learning curve to figuring out.

I've also sometimes just built my own charts, using galleries, containers and other controls and then adding formulas to the X and Y, dimension and color properties that change depending on the datapoints I want to display.

It's not the most practical thing, but I once built a Gannt Chart from scratch in powerapps, using nested galleries and containers.

Was this reply helpful? Yes No
MelaninCoded 42 on at

Like (1)

Report

Thanks for all your responses and answers. Very much appreciated. Like @Mark Nanneman stated there are some challenges with building out your own chart directly in PowerApps.

I've tried with the Canviz chart components suggested. Although, it works. It's at best good for displaying visuals that you don't expect the user to interact with like PowerBI. So for quick stats and need to know stuff.

For interactive, slicing and dicing type of interactive charts, I learning to use galleries, containers and the out of the box pie, column and line chart that comes with Power Apps. With some data shaping functions like AddColumns, RenColumns, GroupBy, ShowColumns and variables for the OnSelect (Shane Young and Reza Dorrani, have some good videos on this) I've been able to do some cool stuff so far.

What will be the ultimate for me will be the ability to use Power Apps controls to interact with a PowerBI tile directly in Power Apps. Still researching and I haven't found much on it.

Was this reply helpful? Yes No