Heatmap

GitHub-style contribution heatmap for visualizing daily activity over a full year.

Import

ts 
import HeatMap from '$lib/components/HeatMap.svelte';

Usage

Pass a Record<string, number> with YYYY-MM-DD keys. Missing dates render as empty cells.

MayJunJulAugSepOctNovDecJanFebMarAprMayMonWedFri
Less More
svelte 
<script lang="ts">
  // Keys must be 'YYYY-MM-DD' format
  const data: Record<string, number> = {
    '2024-11-01': 4,
    '2024-11-02': 7,
    '2024-11-05': 2,
    // ...
  };
</script>

<HeatMap {data} label="Contributions" />

Generating Data

Use this pattern to generate a full year of random activity data for demos.

ts 
// Generate last 365 days
function generateData(): Record<string, number> {
  const result: Record<string, number> = {};
  const now = new Date();
  for (let i = 364; i >= 0; i--) {
    const d = new Date(now);
    d.setDate(d.getDate() - i);
    const key = d.toISOString().slice(0, 10);
    if (Math.random() > 0.6) {
      result[key] = Math.floor(Math.random() * 12) + 1;
    }
  }
  return result;
}

Colors

Change the heatmap color with the color prop.

MayJunJulAugSepOctNovDecJanFebMarAprMayMonWedFri
Less More
MayJunJulAugSepOctNovDecJanFebMarAprMayMonWedFri
Less More
svelte 
<!-- Blue (default) -->
<HeatMap {data} color="#60a5fa" label="Commits" />

<!-- Green (GitHub style) -->
<HeatMap {data} color="#22c55e" label="Activity" />

Cell Size

Adjust cellSize and gap for different density levels.

MayJunJulAugSepOctNovDecJanFebMarAprMayMonWedFri
Less More
MayJunJulAugSepOctNovDecJanFebMarAprMayMonWedFri
Less More
svelte 
<!-- Larger cells -->
<HeatMap {data} :cellSize="16" :gap="4" />

<!-- Compact cells -->
<HeatMap {data} :cellSize="10" :gap="2" />

API Reference

PropTypeDefaultDescription
data Record<string, number>—Activity data keyed by 'YYYY-MM-DD' date strings. Values determine cell intensity.
label string''Text label displayed below the heatmap.
color string'#60a5fa'Base color for active cells. Intensity is derived from the value.
cellSize number12Width and height of each day cell in pixels.
gap number3Gap between cells in pixels.
class string—Extra CSS classes applied to the root element.