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

Import via Components → New component → Import from code

Preview

Theme:

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"