Hackatime Heatmap

Easy to set up Hackatime coding activity heatmap for your profile!

_{^^^ Those are my stats!}

Make and customize your own here!

Usage

You can either use the color scheme aware version:

<a href="https://heatmap.shymike.dev?id=YOUR_ID&standalone=true" title="Click to view detailed data for each day!">
    <picture>
        <source media="(prefers-color-scheme: dark)" srcset="https://heatmap.shymike.dev?id=YOUR_ID&theme=dark">
        <img alt="Hackatime activity heatmap." src="https://heatmap.shymike.dev?id=YOUR_ID&theme=light">
    </picture>
</a>

[!CAUTION] Only the top url in the a tag can have the standalone tag set to true, otherwise the graph will not appear!

Or the simple version:

<img alt="Hackatime activity heatmap." title="Click to view detailed data for each day!" src="https://heatmap.shymike.dev?id=YOUR_ID">

Configuration

All the parameters that can be adjusted are:

• Id
• Timezone
• Theme
• Cell Size
• Padding
• Rounding
• Ranges
• Year
• Show Labels
• Standalone

Some examples:

• https://heatmap.shymike.dev?id=1&theme=catppuccin_dark&timezone=EST
• https://heatmap.shymike.dev?id=1&theme=light&timezone=America/Los_Angeles

Id

This parameter is mandatory and can be set to your Hackatime ID, Hackatime Username or Slack ID

Examples:

• https://heatmap.shymike.dev?id=1
• https://heatmap.shymike.dev?id=msw
• https://heatmap.shymike.dev?id=U0C7B14Q3

Timezone

This parameter can be set to the identifier of any timezone on the tz database. Defaults to UTC.

• https://heatmap.shymike.dev?id=1&timezone=America/Los_Angeles
• https://heatmap.shymike.dev?id=1&timezone=EST

Theme

The theme can be set to either dark, light, catppuccin_dark or catppuccin_light. Defaults to dark.

• https://heatmap.shymike.dev?id=1&theme=dark
• https://heatmap.shymike.dev?id=1&theme=light
• https://heatmap.shymike.dev?id=1&theme=catppuccin_dark
• https://heatmap.shymike.dev?id=1&theme=catppuccin_light

Cell Size

The size of each cell in pixels. Defaults to 10 px.

• https://heatmap.shymike.dev?id=1&cell_size=8
• https://heatmap.shymike.dev?id=1&cell_size=15

Padding

The padding between each cell in pixels. Defaults to 3.

• https://heatmap.shymike.dev?id=1&padding=1
• https://heatmap.shymike.dev?id=1&padding=5

Rounding

The rounding percentage of each cell (0-100). Defaults to 20.

• https://heatmap.shymike.dev?id=1&rounding=0
• https://heatmap.shymike.dev?id=1&rounding=100

Ranges

The percentage ranges for each color as a 3 item string list. Defaults to 70,30,10.

• https://heatmap.shymike.dev?id=1&ranges=80,50,20
• https://heatmap.shymike.dev?id=1&ranges=75,50,25

Year

Display data for a specific calendar year (Jan 1 - Dec 31) instead of the last 365 days. Use current for the current year, or specify a year number. If not set, shows the last 365 days.

• https://heatmap.shymike.dev?id=1&year=current
• https://heatmap.shymike.dev?id=1&year=2025
• https://heatmap.shymike.dev?id=1&year=2026

Show Labels

Whether to show month labels, weekday labels (Mon/Wed/Fri), and the "Less/More" legend. Defaults to true.

• https://heatmap.shymike.dev?id=1&show_labels=true
• https://heatmap.shymike.dev?id=1&show_labels=false

Standalone

Whether or not to embed HTML into the request. Defaults to false

• https://heatmap.shymike.dev?id=1&standalone=true
• https://heatmap.shymike.dev?id=1&standalone=false