Charts

Bar Chart - Label

Added Jun 15, 2026

A vertical bar chart that renders a numeric value label above each bar, powered by a Power Apps collection. Inspired by the shadcn/ui Bar Chart - Label.

Bar Chart - Label

January - June 2024

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(colBarChartLabelData, {month: "January", Value: 186}, {month: "February", Value: 305}, {month: "March", Value: 237}, {month: "April", Value: 73}, {month: "May", Value: 209}, {month: "June", Value: 214})
On your screen's OnVisible, also add: Set(varTooltipBarLabelIdx, 0)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
Each bar displays its value as a label above it. Click a bar to show a tooltip; click again to dismiss.
Replace colBarChartLabelData with any data source that has {month, Value} columns.

Problem Solved

Renders an SVG bar chart inside a Power Apps Image control with value labels floating above each bar, eliminating the need for a tooltip to read individual bar values.

Integration

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

- conBarChartLabel:
    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: =340
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =440
    Children:
      - lblBarLabelTitle:
          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 - Label"
            Width: =400
            X: =20
            Y: =14
      - lblBarLabelDescription:
          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
      - rectBarLabelHeaderLine:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =72
      - imgBarChartLabel:
          Control: Image@2.2.3
          Properties:
            Height: =196
            Width: =416
            X: =12
            Y: =80
            Image: |-
              =With(
                {
                  _n:    CountRows(colBarChartLabelData),
                  _max:  Max(1, Max(colBarChartLabelData, Value)),
                  _slot: Int(400 / Max(1, CountRows(colBarChartLabelData))),
                  _barW: Int(400 / Max(1, CountRows(colBarChartLabelData)) * 0.55)
                },
                "data:image/svg+xml;utf8, " & EncodeUrl(
                  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 196'>" &
                  "<line x1='8' y1='28'  x2='408' y2='28'  stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='61'  x2='408' y2='61'  stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='94'  x2='408' y2='94'  stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='127' x2='408' y2='127' stroke='#e2e8f0' stroke-width='1'/>" &
                  "<line x1='8' y1='160' x2='408' y2='160' stroke='#e2e8f0' stroke-width='1'/>" &
                  Concat(Sequence(_n),
                    "<rect x='" & Text(Int(8 + (Value-1)*_slot + (_slot - _barW) / 2)) &
                    "' y='" & Text(Int(160 - Index(colBarChartLabelData, Value).Value / _max * 132)) &
                    "' width='" & Text(_barW) &
                    "' height='" & Text(Int(Index(colBarChartLabelData, Value).Value / _max * 132)) &
                    "' fill='" & If(varTooltipBarLabelIdx = Value, "#2563eb", "#3b82f6") &
                    "' rx='4' ry='4'/>"
                  ) &
                  Concat(Sequence(_n),
                    "<text x='" & Text(Int(8 + (Value - 0.5) * _slot)) &
                    "' y='" & Text(Int(160 - Index(colBarChartLabelData, Value).Value / _max * 132) - 8) &
                    "' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' font-weight='600' fill='#0f172a'>" &
                    Text(Index(colBarChartLabelData, Value).Value) &
                    "</text>"
                  ) &
                  Concat(Sequence(_n),
                    "<text x='" & Text(Int(8 + (Value - 0.5) * _slot)) &
                    "' y='183' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' fill='#94a3b8'>" &
                    Left(Index(colBarChartLabelData, Value).month, 3) & "</text>"
                  ) &
                  "</svg>"
                )
              )
      - galBarLabelInteract:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Fill: =RGBA(0, 0, 0, 0)
            Height: =160
            Items: =Sequence(CountRows(colBarChartLabelData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =416 / Max(1, CountRows(colBarChartLabelData))
            Width: =416
            X: =12
            Y: =100
          Children:
            - btnBarLabelHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipBarLabelIdx = ThisItem.Value, Set(varTooltipBarLabelIdx, 0), Set(varTooltipBarLabelIdx, 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: =50
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Visible: =varTooltipBarLabelIdx > 0
            Width: =110
            X: =Max(20, Min(334, 20 + (varTooltipBarLabelIdx - 0.5) * (400 / Max(1, CountRows(colBarChartLabelData))) - 55))
            Y: =Max(84, Int(242 - Index(colBarChartLabelData, Max(1, varTooltipBarLabelIdx)).Value / Max(1, Max(colBarChartLabelData, Value)) * 132))
          Children:
            - lblTooltipBarLabelMonth:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =18
                  Size: =10
                  Text: =If(varTooltipBarLabelIdx > 0, Index(colBarChartLabelData, varTooltipBarLabelIdx).month, "")
                  Width: =100
                  X: =8
                  Y: =5
            - imgTooltipBarLabelDot:
                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
            - lblTooltipBarLabelValue:
                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(varTooltipBarLabelIdx > 0, Text(Index(colBarChartLabelData, varTooltipBarLabelIdx).Value), "")
                  Width: =90
                  X: =16
                  Y: =26
      - rectBarLabelFooterLine:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =279
      - lblBarLabelTrend:
          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: =292
      - lblBarLabelDateRange:
          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: =316

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

Card Content

How to Use

Problem Solved

Integration

YAML Code

Implementation