Charts

Bar Chart - Multiple

Added Jun 15, 2026

A grouped bar chart with two series (Category 1 + Category 2) powered by a Power Apps collection. Inspired by the shadcn/ui Bar Chart - Multiple.

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

CopySnips Live Preview

How to Use

On your screen's OnVisible, initialize data and variables:
ClearCollect(colBarChartMData, {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});
Set(varBarMAnimate, true); Set(varTooltipBarMIdx, 0)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
To replay animation: Set(varBarMAnimate, false); ClearCollect(...); Set(varBarMAnimate, true)

Problem Solved

Renders a dynamic grouped SVG bar chart with two series inside a Power Apps Image control. Category 1 bars in blue, Category 2 bars in purple. A grow-up animation plays on load, and clicking a group shows a tooltip with both values.

Integration

Bind colBarChartMData to any data source with {month, Category1, Category2} columns.

- conBarChartM:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderStyle: =BorderStyle.Solid
      BorderThickness: =1
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(255, 255, 255, 1)
      Height: =320
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =440
    Children:
      - tmrChartAnimate:
          Control: Timer@2.0.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varBarMAnimate, false)
            Repeat: =false
            Start: =varBarMAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblChartTitle:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Bold
            Height: =24
            Size: =14
            Text: ="Bar Chart - Multiple"
            Width: =400
            X: =20
            Y: =14
      - lblChartDescription:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =12
            Text: ="January - June 2024"
            Width: =400
            X: =20
            Y: =44
      - rectHeaderLine:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =72
      - imgBarChartM:
          Control: Image@2.2.3
          Properties:
            Height: =176
            Width: =416
            X: =12
            Y: =80
            Image: |-
              =With(
                {
                  _data: If(
                    CountRows(colBarChartMData) > 0,
                    colBarChartMData,
                    Table(
                      {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}
                    )
                  ),
                  _p: Min(1, tmrChartAnimate.Value / 1200)
                },
                With(
                  {
                    _n:    CountRows(_data),
                    _max:  Max(1, Max(Max(_data, Category1), Max(_data, Category2))),
                    _slot: Int(400 / Max(1, CountRows(_data))),
                    _barW: Int(400 / Max(1, CountRows(_data)) * 0.38),
                    _gap:  Int(400 / Max(1, CountRows(_data)) * 0.06),
                    _ease: If(varBarMAnimate, 1 - Power(Max(0, 1 - _p), 3), 1)
                  },
                  "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 + Int((_slot - 2 * _barW - _gap) / 2))) &
                      "' y='" & Text(Int(128 - Index(_data, Value).Category1 / _max * 120 * _ease)) &
                      "' width='" & Text(_barW) &
                      "' height='" & Text(Int(Index(_data, Value).Category1 / _max * 120 * _ease)) &
                      "' fill='" & If(varTooltipBarMIdx = Value, "#2563eb", "#3b82f6") &
                      "' rx='3' ry='3'/>"
                    ) &
                    Concat(Sequence(_n),
                      "<rect x='" & Text(Int(8 + (Value - 1) * _slot + Int((_slot - 2 * _barW - _gap) / 2) + _barW + _gap)) &
                      "' y='" & Text(Int(128 - Index(_data, Value).Category2 / _max * 120 * _ease)) &
                      "' width='" & Text(_barW) &
                      "' height='" & Text(Int(Index(_data, Value).Category2 / _max * 120 * _ease)) &
                      "' fill='" & If(varTooltipBarMIdx = 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(_data, 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>"
                  )
                )
              )
      - galChartInteract:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Fill: =RGBA(0, 0, 0, 0)
            Height: =128
            Items: =Sequence(CountRows(colBarChartMData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =416 / Max(1, CountRows(colBarChartMData))
            Width: =416
            X: =12
            Y: =83
          Children:
            - btnChartHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipBarMIdx = ThisItem.Value, Set(varTooltipBarMIdx, 0), Set(varTooltipBarMIdx, 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)
            BorderStyle: =BorderStyle.Solid
            BorderThickness: =1
            DropShadow: =DropShadow.Regular
            Fill: =RGBA(255, 255, 255, 1)
            Height: =72
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Visible: =varTooltipBarMIdx > 0
            Width: =120
            X: =Max(8, Min(312, 20 + (varTooltipBarMIdx - 0.5) * (400 / Max(1, CountRows(colBarChartMData))) - 60))
            Y: =Max(4, 131 - Max(Index(colBarChartMData, Max(1, varTooltipBarMIdx)).Category1, Index(colBarChartMData, Max(1, varTooltipBarMIdx)).Category2) / Max(1, Max(Max(colBarChartMData, Category1), Max(colBarChartMData, Category2))) * 120)
          Children:
            - lblTooltipMonth:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =18
                  Size: =10
                  Text: =If(varTooltipBarMIdx > 0, Index(colBarChartMData, varTooltipBarMIdx).month, "")
                  Width: =110
                  X: =8
                  Y: =5
            - imgDotCategory1:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(59, 130, 246, 1)
                  Height: =8
                  Image: =Blank()
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Width: =3
                  X: =8
                  Y: =28
            - lblCategory1Value:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =18
                  Size: =11
                  Text: =If(varTooltipBarMIdx > 0, Text(Index(colBarChartMData, varTooltipBarMIdx).Category1), "")
                  Width: =100
                  X: =16
                  Y: =26
            - imgDotCategory2:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(168, 85, 247, 1)
                  Height: =8
                  Image: =Blank()
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Width: =3
                  X: =8
                  Y: =50
            - lblCategory2Value:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =18
                  Size: =11
                  Text: =If(varTooltipBarMIdx > 0, Text(Index(colBarChartMData, varTooltipBarMIdx).Category2), "")
                  Width: =100
                  X: =16
                  Y: =48
      - rectFooterLine:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =259
      - lblTrendText:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Semibold
            Height: =20
            Size: =12
            Text: ="Trending up by 5.2% this month"
            Width: =400
            X: =20
            Y: =272
      - lblDateRange:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =11
            Text: ="Showing total visitors for the last 6 months"
            Width: =400
            X: =20
            Y: =296

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 - Multiple

Card Content

How to Use

Problem Solved

Integration

YAML Code

Implementation