Charts

Bar Chart - Stacked + Legend

Added Jun 15, 2026

A stacked vertical bar chart with two data series (Category 1 + Category 2) and a centered SVG legend. Bars are stacked on a single axis with blue (Category 1) as the base and purple (Category 2) on top. Inspired by the shadcn/ui Bar Chart - Stacked.

January - June 2024

Category 1

Category 2

Trending up by 5.2% this month

Showing total visitors for the last 6 months

CopySnips Live Preview

How to Use

Create the collection: ClearCollect(colBarChartSLData, {month: "January", Category1: 186, Category2: 80}, {month: "February", Category1: 305, Category2: 200}, {month: "March", Category1: 237, Category2: 120}, {month: "April", Category1: 73, Category2: 190}, {month: "May", Category1: 209, Category2: 130}, {month: "June", Category1: 214, Category2: 140})
On your screen's OnVisible, also add: Set(varTooltipBarSLIdx, 0)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
Click any bar to show a tooltip with both Category1 and Category2 values. Click the same bar again to dismiss.
Replace colBarChartSLData with any collection that has {month, Category1, Category2} columns.

Problem Solved

Renders a two-series stacked bar chart inside a Power Apps Image control. Blue = Category 1 (base), Purple = Category 2 (top). A centered SVG legend identifies each series. Click interaction shows per-bar tooltips.

Integration

Bind colBarChartSLData to any data source with {month, Category1, Category2} columns. The chart redraws automatically when the collection changes.

- conBarChartSL:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Light
      Fill: =RGBA(255, 255, 255, 1)
      Height: =320
      RadiusBottomLeft: =16
      RadiusBottomRight: =16
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Width: =416
    Children:
      - lblBarSLTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Bold
            Height: =22
            Size: =14
            Text: ="Bar Chart - Stacked + Legend"
            Width: =376
            X: =20
            Y: =16
      - lblBarSLDesc:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =18
            Size: =11
            Text: ="January - June 2024"
            Width: =376
            X: =20
            Y: =40
      - imgBarChartSL:
          Control: Image@2.2.3
          Properties:
            Height: =176
            Image: |-
              =With(
                {
                  _n:      CountRows(colBarChartSLData),
                  _max:    Max(1, Max(colBarChartSLData, Category1) + Max(colBarChartSLData, Category2)),
                  _slot:   Int(400 / Max(1, CountRows(colBarChartSLData))),
                  _barW:   Int(400 / Max(1, CountRows(colBarChartSLData)) * 0.6),
                  _margin: Int(400 / Max(1, CountRows(colBarChartSLData)) * 0.2)
                },
                "data:image/svg+xml;utf8, " & EncodeUrl(
                  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 176'>" &
                  "<line x1='8' y1='8' x2='408' y2='8' stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='38' x2='408' y2='38' stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='68' x2='408' y2='68' stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='98' x2='408' y2='98' stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='128' x2='408' y2='128' stroke='#e2e8f0' stroke-width='1'/>" &
                  Concat(Sequence(_n), "<rect x='" & Text(Int(8 + (Value-1)*_slot + _margin)) & "' y='" & Text(Int(128 - (Index(colBarChartSLData, Value).Category1 + Index(colBarChartSLData, Value).Category2) / _max * 120)) & "' width='" & Text(_barW) & "' height='" & Text(Int((Index(colBarChartSLData, Value).Category1 + Index(colBarChartSLData, Value).Category2) / _max * 120)) & "' fill='" & If(varTooltipBarSLIdx = Value, "#2563eb", "#3b82f6") & "' rx='3' ry='3'/>") &
                  Concat(Sequence(_n), "<rect x='" & Text(Int(8 + (Value-1)*_slot + _margin)) & "' y='" & Text(Int(128 - (Index(colBarChartSLData, Value).Category1 + Index(colBarChartSLData, Value).Category2) / _max * 120)) & "' width='" & Text(_barW) & "' height='" & Text(Int(Index(colBarChartSLData, Value).Category2 / _max * 120)) & "' fill='" & If(varTooltipBarSLIdx = Value, "#7c3aed", "#a855f7") & "' rx='3' ry='3'/>") &
                  Concat(Sequence(_n), "<text x='" & Text(Int(8 + (Value - 0.5) * _slot)) & "' y='150' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' fill='#94a3b8'>" & Left(Index(colBarChartSLData, Value).month, 3) & "</text>") &
                  "<rect x='141' y='161' width='8' height='6' fill='#3b82f6' rx='1' ry='1'/>" &
                  "<text x='152' y='167' font-family='Arial,sans-serif' font-size='9' fill='#64748b'>Category 1</text>" &
                  "<rect x='214' y='161' width='8' height='6' fill='#a855f7' rx='1' ry='1'/>" &
                  "<text x='225' y='167' font-family='Arial,sans-serif' font-size='9' fill='#64748b'>Category 2</text>" &
                  "</svg>"
                )
              )
            Width: =416
            X: =0
            Y: =80
      - galBarChartSL:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Height: =128
            Items: =Sequence(CountRows(colBarChartSLData))
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =Int(400 / Max(1, CountRows(colBarChartSLData)))
            Width: =400
            X: =8
            Y: =83
          Children:
            - btnBarSLItem:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =Set(varTooltipBarSLIdx, If(varTooltipBarSLIdx = ThisItem.Value, 0, ThisItem.Value))
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - conTooltip:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderThickness: =1
            DropShadow: =DropShadow.Regular
            Fill: =RGBA(255, 255, 255, 1)
            Height: =72
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Visible: =varTooltipBarSLIdx > 0
            Width: =72
            X: =Max(8, Min(Int(416 - 80), Int(8 + (varTooltipBarSLIdx - 0.5) * Int(400 / Max(1, CountRows(colBarChartSLData)))) - 36))
            Y: =Max(8, Int(132 - (Index(colBarChartSLData, Max(1, varTooltipBarSLIdx)).Category1 + Index(colBarChartSLData, Max(1, varTooltipBarSLIdx)).Category2) / Max(1, Max(colBarChartSLData, Category1) + Max(colBarChartSLData, Category2)) * 120))
          Children:
            - lblTooltipBarSLMonth:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =20
                  Size: =10
                  Text: =If(varTooltipBarSLIdx > 0, Left(Index(colBarChartSLData, varTooltipBarSLIdx).month, 3), "")
                  Width: =62
                  X: =5
                  Y: =4
            - imgDotCategory1:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(59, 130, 246, 1)
                  Height: =6
                  Image: =Blank()
                  RadiusBottomLeft: =3
                  RadiusBottomRight: =3
                  RadiusTopLeft: =3
                  RadiusTopRight: =3
                  Width: =3
                  X: =5
                  Y: =27
            - lblCategory1Value:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Bold
                  Height: =16
                  Size: =10
                  Text: =If(varTooltipBarSLIdx > 0, Text(Index(colBarChartSLData, varTooltipBarSLIdx).Category1), "")
                  Width: =55
                  X: =12
                  Y: =27
            - imgDotCategory2:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(168, 85, 247, 1)
                  Height: =6
                  Image: =Blank()
                  RadiusBottomLeft: =3
                  RadiusBottomRight: =3
                  RadiusTopLeft: =3
                  RadiusTopRight: =3
                  Width: =3
                  X: =5
                  Y: =47
            - lblCategory2Value:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Bold
                  Height: =16
                  Size: =10
                  Text: =If(varTooltipBarSLIdx > 0, Text(Index(colBarChartSLData, varTooltipBarSLIdx).Category2), "")
                  Width: =55
                  X: =12
                  Y: =47
      - rectBarSLDivider:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =416
            X: =0
            Y: =256
      - lblBarSLTrend:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =18
            Size: =12
            Text: ="Trending up by 5.2% this month"
            Width: =376
            X: =20
            Y: =268
      - lblBarSLDate:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =18
            Size: =11
            Text: ="Showing total visitors for the last 6 months"
            Width: =376
            X: =20
            Y: =288

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Bar Chart - Stacked + Legend

Card Content

How to Use

Problem Solved

Integration

YAML Code

Implementation