Stacked status bar

A total with one horizontal bar split into coloured segments per status, and a legend with the count and percentage of each.

Overview

A stacked status bar shows how a total splits into statuses: the total in large type, one bar divided into segments in the colour of each status, and a legend with the count and percentage per status. The segments are as wide as their share, with small gaps between them and rounded ends.

The bar is made of four containers whose FillPortions are the values, so the auto layout does the maths. For a fifth status, copy StackedStatusBarSegment4, rename it and change the 4 in its formulas to 5.

When to use

Dashboards that show how work is spread over statuses, such as done, open and overdue.
Two to four statuses that add up to a meaningful total.

When not to use

Comparing unrelated numbers: use a ranked bar list.
One value against a target: use a progress bar or a progress ring.

Controls used

Control	Version
GroupContainer	`1.5.0`
ModernText	`1.0.0`
Gallery	`2.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

- StackedStatusBarRoot:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =ColorFade(App.Theme.Colors.Darker70, 88%)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =Color.White
      Height: =StackedStatusBarTitle.Height + StackedStatusBarTotal.Height + StackedStatusBarBar.Height + StackedStatusBarLegend.Height + 3 * 8 + 40
      LayoutDirection: =LayoutDirection.Vertical
      LayoutGap: =8
      PaddingBottom: =20
      PaddingLeft: =20
      PaddingRight: =20
      PaddingTop: =20
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =Min(560, Parent.Width)
    Children:
      - StackedStatusBarTitle:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text
            AlignInContainer: =AlignInContainer.Stretch
            Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
            Height: =22
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingTop: =0
            Size: =13
            Text: ="Inspections this quarter"
            Wrap: =false
      - StackedStatusBarTotal:
          Control: ModernText@1.0.0
          Properties:
            AccessibleLabel: =Self.Text & " inspections"
            AlignInContainer: =AlignInContainer.Stretch
            FontWeight: =FontWeight.Semibold
            Height: =40
            LayoutMinHeight: =0
            LayoutMinWidth: =80
            PaddingBottom: =0
            PaddingTop: =0
            Size: =28
            Text: =Sum(StackedStatusBarLegend.AllItems, Value)
            Wrap: =false
      - StackedStatusBarBar:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =12
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutGap: =3
            LayoutMinHeight: =12
            LayoutMinWidth: =120
          Children:
            - StackedStatusBarSegment1:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =Index(StackedStatusBarLegend.AllItems, 1).Color
                  FillPortions: =Index(StackedStatusBarLegend.AllItems, 1).Value
                  Height: =12
                  LayoutMinHeight: =12
                  LayoutMinWidth: =4
                  RadiusBottomLeft: =6
                  RadiusBottomRight: =2
                  RadiusTopLeft: =6
                  RadiusTopRight: =2
                  Visible: =StackedStatusBarLegend.AllItemsCount >= 1
            - StackedStatusBarSegment2:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =Index(StackedStatusBarLegend.AllItems, 2).Color
                  FillPortions: =Index(StackedStatusBarLegend.AllItems, 2).Value
                  Height: =12
                  LayoutMinHeight: =12
                  LayoutMinWidth: =4
                  RadiusBottomLeft: =2
                  RadiusBottomRight: =2
                  RadiusTopLeft: =2
                  RadiusTopRight: =2
                  Visible: =StackedStatusBarLegend.AllItemsCount >= 2
            - StackedStatusBarSegment3:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =Index(StackedStatusBarLegend.AllItems, 3).Color
                  FillPortions: =Index(StackedStatusBarLegend.AllItems, 3).Value
                  Height: =12
                  LayoutMinHeight: =12
                  LayoutMinWidth: =4
                  RadiusBottomLeft: =2
                  RadiusBottomRight: =2
                  RadiusTopLeft: =2
                  RadiusTopRight: =2
                  Visible: =StackedStatusBarLegend.AllItemsCount >= 3
            - StackedStatusBarSegment4:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =Index(StackedStatusBarLegend.AllItems, 4).Color
                  FillPortions: =Index(StackedStatusBarLegend.AllItems, 4).Value
                  Height: =12
                  LayoutMinHeight: =12
                  LayoutMinWidth: =4
                  RadiusBottomLeft: =2
                  RadiusBottomRight: =6
                  RadiusTopLeft: =2
                  RadiusTopRight: =6
                  Visible: =StackedStatusBarLegend.AllItemsCount >= 4
      - StackedStatusBarLegend:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            AccessibleLabel: ="Inspections by status"
            AlignInContainer: =AlignInContainer.Stretch
            BorderThickness: =0
            FillPortions: =0
            Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) + Self.TemplatePadding + 8
            Items: |
              =With(
                  {
                      rows: Table(
                          {Label: "Completed", Value: 58, Color: App.Theme.Colors.Primary},
                          {Label: "In progress", Value: 21, Color: App.Theme.Colors.Lighter40},
                          {Label: "Overdue", Value: 6, Color: RGBA(209, 52, 56, 1)},
                          {Label: "Not started", Value: 15, Color: ColorFade(App.Theme.Colors.Darker70, 82%)}
                      )
                  },
                  AddColumns(rows, Total, Sum(rows, Value))
              )
            LayoutMinHeight: =0
            LayoutMinWidth: =120
            ShowScrollbar: =false
            TabIndex: =0
            TemplatePadding: =0
            TemplateSize: =32
          Children:
            - StackedStatusBarDot:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =ThisItem.Color
                  Height: =10
                  RadiusBottomLeft: =5
                  RadiusBottomRight: =5
                  RadiusTopLeft: =5
                  RadiusTopRight: =5
                  Width: =10
                  X: =0
                  Y: =19
            - StackedStatusBarLabel:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text & " " & ThisItem.Value
                  Color: =ColorFade(App.Theme.Colors.Darker70, 30%)
                  Height: =24
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Label
                  Width: =Parent.TemplateWidth - 140
                  Wrap: =false
                  X: =14
                  Y: =12
            - StackedStatusBarCount:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Right
                  FontWeight: =FontWeight.Semibold
                  Height: =24
                  PaddingBottom: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =ThisItem.Value
                  Width: =60
                  Wrap: =false
                  X: =Parent.TemplateWidth - 120
                  Y: =12
            - StackedStatusBarPercent:
                Control: ModernText@1.0.0
                Properties:
                  AccessibleLabel: =Self.Text
                  Align: =Align.Right
                  Color: =ColorFade(App.Theme.Colors.Darker70, 45%)
                  Height: =24
                  PaddingBottom: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  Size: =13
                  Text: =Round(ThisItem.Value / Max(1, ThisItem.Total) * 100, 0) & "%"
                  Width: =60
                  Wrap: =false
                  X: =Parent.TemplateWidth - 60
                  Y: =12

Make it yours

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

`Items` on `StackedStatusBarLegend`

One row per status, up to four, with a Label, a Value and a Color. Keep the AddColumns line, which adds the Total the percentages use. The red for Overdue is hard-coded; pick a colour that suits your theme.

In the YAML

YAML

Items: |
  =With(
      {
          rows: Table(
              {Label: "Completed", Value: 58, Color: App.Theme.Colors.Primary},
              {Label: "In progress", Value: 21, Color: App.Theme.Colors.Lighter40},
              {Label: "Overdue", Value: 6, Color: RGBA(209, 52, 56, 1)},
              {Label: "Not started", Value: 15, Color: ColorFade(App.Theme.Colors.Darker70, 82%)}
          )
      },
      AddColumns(rows, Total, Sum(rows, Value))
  )

Your version

YAML

Items: |
  =With(
      {
          rows: Table(
              {Label: "Done", Value: CountRows(Filter(Inspections, Status = "Done")), Color: App.Theme.Colors.Primary},
              {Label: "Open", Value: CountRows(Filter(Inspections, Status = "Open")), Color: App.Theme.Colors.Lighter40},
              {Label: "Overdue", Value: CountRows(Filter(Inspections, Status = "Overdue")), Color: RGBA(209, 52, 56, 1)}
          )
      },
      AddColumns(rows, Total, Sum(rows, Value))
  )

`Text` on `StackedStatusBarTitle`

What the total counts.

In the YAML

YAML

Text: ="Inspections this quarter"

Your version

YAML

Text: ="Requests this month"

How to paste

Open your app in Power Apps Studio.
Check that modern controls are on: Settings → Updates → Modern controls and themes. In newer environments they are on by default.
Copy the YAML with the Copy button above the code.
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, StackedStatusBarRoot, with all its controls inside.
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.

Missing a component, or did this one not paste cleanly? Suggest a component or report an issue.

Stacked status bar

Overview

When to use

When not to use

Controls used

YAML

Make it yours

Items on StackedStatusBarLegend

Text on StackedStatusBarTitle

How to paste

When Studio flags a control version

`Items` on `StackedStatusBarLegend`

`Text` on `StackedStatusBarTitle`