Heatmap

SVG heatmap visualization for time-based patterns. Display activity, usage, or any data across days and hours. Similar to GitHub's contribution graph.

heatmap.yaml

1. Go to the Components tab (right side panel, next to Screens)
2. Click New component — this creates a blank component
3. Click outside the new component to deselect it
4. Paste the YAML with Ctrl+V / ⌘V

Preview

Issues opening time

Week of Jan 8-14

6am

10am

12pm

5pm

8pm

Less

Installation

Copy the YAML component definition and import into Power Apps Studio.

# In Power Apps Studio:
1. Components → New component → Import from code
2. Paste YAML definition
3. Component appears in library

Usage

Basic heatmap

// Basic Heatmap - Activity Pattern
cmpHeatmap.ChartData: Table(
    {DayOfWeek: 0, Hour: 9, Value: 12},
    {DayOfWeek: 1, Hour: 9, Value: 15},
    {DayOfWeek: 2, Hour: 9, Value: 8},
    {DayOfWeek: 0, Hour: 14, Value: 20},
    {DayOfWeek: 1, Hour: 14, Value: 25},
    {DayOfWeek: 4, Hour: 17, Value: 30}
)
cmpHeatmap.ChartTitle: "Issues opening time"
cmpHeatmap.DayLabels: "M,T,W,T,F,S,S"
cmpHeatmap.BaseColor: "#6366F1"
cmpHeatmap.EmptyColor: "#E0E7FF"

Data from SharePoint/Dataverse

// Dynamic data - Support tickets by time
cmpHeatmap.ChartData: 
    AddColumns(
        GroupBy(
            Filter(
                SupportTickets,
                Created >= DateAdd(Today(), -30)
            ),
            "DayOfWeek",
            Weekday(Created) - 1,
            "Hour",
            Hour(Created),
            "Tickets"
        ),
        "Value", CountRows(Tickets)
    )

// Auto-scales colors based on max value
// Shows busiest support times

Custom time labels

// Custom time periods
cmpHeatmap.TimeLabels: Table(
    {Hour: 0, Label: "Midnight"},
    {Hour: 6, Label: "6am"},
    {Hour: 12, Label: "Noon"},
    {Hour: 18, Label: "6pm"},
    {Hour: 21, Label: "9pm"}
)

// Color themes
cmpHeatmap.BaseColor: "#6366F1"  // Indigo
cmpHeatmap.BaseColor: "#10B981"  // Green
cmpHeatmap.BaseColor: "#F59E0B"  // Amber
cmpHeatmap.BaseColor: "#EF4444"  // Red

cmpHeatmap.Theme: "Light"  // or "Dark"

Properties

Property	Type	Default
`ChartData` Table with DayOfWeek (0-6), Hour, and Value columns	Table	Sample data
`ChartTitle` Title displayed above the heatmap	Text	"Issues opening time"
`DayLabels` Comma-separated day labels (7 items)	Text	"M,T,W,T,F,S,S"
`TimeLabels` Table with Hour and Label columns	Table	6am, 10am, 12pm, 5pm, 8pm
`BaseColor` Base color for heatmap cells (hex format)	Text	"#6366F1"
`EmptyColor` Color for cells with no data (hex format)	Text	"#E0E7FF"
`Theme` "Light" or "Dark" theme	Text	"Light"
`ShowTitle` Show or hide the chart title	Boolean	true

Examples

Theme:☀️ Light

Customer support activity

Support Requests

Peak hours this week

6am

10am

12pm

5pm

8pm

Less

// Support ticket heatmap
cmpHeatmap.ChartData: 
    AddColumns(
        GroupBy(
            SupportTickets,
            "DayOfWeek", Weekday(Created)-1,
            "Hour", Hour(Created),
            "Tickets"
        ),
        "Value", CountRows(Tickets)
    )
cmpHeatmap.ChartTitle: "Support Requests"
cmpHeatmap.TimeLabels: Table(
    {Hour: 6, Label: "6am"},
    {Hour: 10, Label: "10am"},
    {Hour: 12, Label: "12pm"},
    {Hour: 17, Label: "5pm"},
    {Hour: 20, Label: "8pm"}
)
cmpHeatmap.BaseColor: "#6366F1"

Website traffic (green theme)

Page Views

Hourly traffic pattern

6am

10am

12pm

5pm

8pm

Less

// Analytics heatmap
cmpHeatmap.ChartData: 
    AddColumns(
        GroupBy(
            PageViews,
            "DayOfWeek", Weekday(Timestamp)-1,
            "Hour", Hour(Timestamp),
            "Views"
        ),
        "Value", Sum(Views, Count)
    )
cmpHeatmap.ChartTitle: "Page Views"
cmpHeatmap.BaseColor: "#10B981"  // Green
cmpHeatmap.EmptyColor: "#D1FAE5"
cmpHeatmap.ShowTitle: true

Office occupancy

Office Check-ins

This week

6am

10am

12pm

5pm

8pm

Less

// Office occupancy tracking
cmpHeatmap.ChartData: 
    AddColumns(
        GroupBy(
            BadgeScans,
            "DayOfWeek", Weekday(ScanTime)-1,
            "Hour", Hour(ScanTime),
            "Scans"
        ),
        "Value", CountRows(Scans)
    )
cmpHeatmap.ChartTitle: "Office Check-ins"
cmpHeatmap.BaseColor: "#F59E0B"  // Amber
cmpHeatmap.Theme: "Light"

Community

Use the toolbar to format · or type markdown directly