Scatter plots in PowerApps using a Gallery control

This article will show you how you can build custom data visualizations in PowerApps using only two controls: a Gallery, and a Circle.

While PowerApps already supports Column charts, Line charts and Pie charts out of the box, there is currently no built-in way to render scatter plots. Note that the idea presented here is only useful if you have small amounts of data. This is not a replacement for more advanced data visualization tools such as the ones that exist with Power BI.

Download sample app

How it works

The trick is to use a vertical Gallery with a very small TemplateSize. The gallery template will have a single Circle control, whose X, Y, Width, Height, and Fill will be bound to fields of a data source. The Gallery works by replicating its template for as many items as exists in the data source it is bound to, so if we have some data with a few entries, we will get one circle for each entry. In addition, PowerApps ensures gallery items that extend beyond the template size are not clipped and will render correctly even if TempalteSize is much smaller than the circles. So, are we all set?

Well, almost. If we could set the TemplateSize to 0, we would be done. However, the minimum value allowed in PowerApps is TemplateSize=1. This means that each replicated circle will be one pixel below the one before it, and the circles would not render at exactly the right place. We can easily fix that by having each item in the gallery have a field with the item index in the gallery, and offset the circle's Y position accordingly to compensate for the gallery TemplateSize.

Formula time

Here's how we add items to the data source (it is just a collection in this case). Note that we are using context variables minRadius and maxRadius just to make it easier to change those values in the sample. You could hard code them or get them from somewhere else instead just as easily.

 UpdateContext({minRadius:10, maxRadius:30});
Collect(Bubbles,
  {
    index: CountRows(Bubbles),
    x: Rand() * (Gallery1.Width - maxRadius*2) + maxRadius,
    y: Rand() * (Gallery1.Height - maxRadius*2) + maxRadius,
    radius: Rand() * (maxRadius-minRadius) + minRadius,
    color: RGBA(Rand() * 255, Rand() * 255, 0, 1)
  })

And here's how the circle in the gallery template is configured.

 Circle1.X      = ThisItem.x-ThisItem.radius
Circle1.Y      = ThisItem.y-ThisItem.radius-ThisItem.index*Gallery1.TemplateHeight
Circle1.Width  = ThisItem.radius*2
Circle1.Height = ThisItem.radius*2
Circle1.Fill   = ThisItem.color

Wrapping up

And that's it for now. Now you know how to leverage a Gallery control to do more than just show rows of data. The possibilities are endless, but remember that this is not exactly the scenario that Galleries were designed and optimized for, so always try to use the built-in data visualization controls when possible and send us feedback of what you're trying to build and what would make things easier for you.

See you next time!

PS: This article was inspired by a question in the PowerApps forums. Thanks JohnP for the questions and keep them coming!