Data displayCanvas appBasic

Ranked bar list

A top-N list of labels and values, sorted high to low, each with a bar scaled to the largest value; a chart built from containers only.

Ranked bar list in Power Apps Studio
Version
1.0.0
Updated
Verified in Studio
Not yet
Tags
chartbarrankingdashboard

Overview

A ranked bar list compares a handful of values at a glance: a label and a number on each row, with a bar underneath that is as long as the value relative to the largest one. The rows are sorted from high to low, and the top row's bar is in the theme colour, the rest in a lighter tint.

The bars are plain containers, so the list needs no chart control, premium connector or code component, and it stretches with its card up to 480 pixels.

When to use

  • Top five or top ten lists on dashboards: sites, inspectors, categories.
  • Comparing values that share one unit.

When not to use

  • Trends over time: use a line chart.
  • Parts of a whole: use a stacked status bar or a progress ring.

Controls used

ControlVersion
GroupContainer1.5.0
ModernText1.0.0
Gallery2.15.0

YAML

Works as is, with example data inline. Paste it into a screen or container; the steps are underHow to paste.

Not yet verified in Power Apps Studio. The control versions are drafted from documentation. If Studio flags one, see How to paste for the fix.

component.yaml
- RankedBarListRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =RankedBarListTitle.Height + RankedBarListSubtitle.Height + RankedBarListGallery.Height + 2 * 4 + 40
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =4
      PaddingBottom: =20
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(480, Parent.Width)
    Children:
      - RankedBarListTitle:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            FontWeight: =FontWeight.Semibold
            Height: =26
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingTop: =0
            Size: =16
            Text: ="Findings by site"
            Wrap: =false
      - RankedBarListSubtitle:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =28
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =8
            PaddingTop: =0
            Size: =13
            Text: ="Open findings, last 90 days"
            Wrap: =false
      - RankedBarListGallery:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: =RankedBarListTitle.Text
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding
            Items: |
              =With(
                  {
                      rows: Table(
                          {Label: "Warehouse Ghent", Value: 18},
                          {Label: "Depot Antwerp", Value: 12},
                          {Label: "Office Leuven", Value: 7},
                          {Label: "Plant Kortrijk", Value: 5},
                          {Label: "Office Brussels", Value: 2}
                      )
                  },
                  AddColumns(Sort(rows, Value, SortOrder.Descending), Top, Max(rows, Value))
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =46
          Children:
            - RankedBarListLabel:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text & ", " & ThisItem.Value
                  Height: =22
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Label
                  Width: =Parent.TemplateWidth - 60
                  Wrap: =false
                  X: =0
                  Y: =2
            - RankedBarListValue:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Right
                  FontWeight: =FontWeight.Semibold
                  Height: =22
                  PaddingBottom: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Value
                  Width: =60
                  Wrap: =false
                  X: =Parent.TemplateWidth - Self.Width
                  Y: =2
            - RankedBarListTrack:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =ColorFade(App.Theme.Colors.Darker70, 93%)
                  Height: =8
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =28
            - RankedBarListBar:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =If(ThisItem.Value = ThisItem.Top, App.Theme.Colors.Primary, App.Theme.Colors.Lighter40)
                  Height: =8
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Width: =Max(8, Parent.TemplateWidth * ThisItem.Value / Max(1, ThisItem.Top))
                  X: =0
                  Y: =28

Make it yours

The example runs on sample data. Replace these properties to connect it to your app.

Items on RankedBarListGallery

Put your rows in rows, each with a Label and a Value. Keep the AddColumns line: it sorts the rows and adds Top, the largest value, which scales the bars.

In the YAML

YAML
Items: |
  =With(
      {
          rows: Table(
              {Label: "Warehouse Ghent", Value: 18},
              {Label: "Depot Antwerp", Value: 12},
              {Label: "Office Leuven", Value: 7},
              {Label: "Plant Kortrijk", Value: 5},
              {Label: "Office Brussels", Value: 2}
          )
      },
      AddColumns(Sort(rows, Value, SortOrder.Descending), Top, Max(rows, Value))
  )

Your version

YAML
Items: |
  =With(
      {
          rows: ForAll(
              GroupBy(Filter(Findings, Status = "Open"), Site, Items) As g,
              {Label: g.Site, Value: CountRows(g.Items)}
          )
      },
      AddColumns(FirstN(Sort(rows, Value, SortOrder.Descending), 5), Top, Max(rows, Value))
  )

Text on RankedBarListTitle

What is being ranked. Change the subtitle under it to the period or filter.

In the YAML

YAML
Text: ="Findings by site"

Your version

YAML
Text: ="Overdue inspections by inspector"

How to paste

  1. Open your app in Power Apps Studio.
  2. Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
  3. Copy the YAML with the Copy button above the code.
  4. In the Tree view, select the screen or container that should hold the component and press Ctrl+V. The whole component arrives as one container, RankedBarListRoot, with all its controls inside.
  5. Work through Make it yours to swap the example data for your own.

Where your version of Studio has a code view for a control or screen, you can paste the same YAML there instead of into the tree view.

When Studio flags a control version

Each control in the YAML names its version, like Control: ModernButton@1.0.0. If that version is newer than what your environment knows, Studio falls back to the version it has or flags the control. All controls of one type in an app must also use the same version, so an app that already has an older ModernButton can reject the paste. To fix it, insert the same control from the Insert pane, copy it as code, note the version on its Control: line, update every matching line in the YAML and paste again.