🔥 svelte5-heatmap

A Svelte 5 heatmap component inspired by GitHub’s contribution graph

🚀 Getting Started

npm install svelte5-heatmap

<script>
  import Heatmap from "svelte5-heatmap";

  let data = $state<{ [key: string]: number }>({});
  let year = 2025;
  function fillMap() {
    let map: { [key: string]: number } = {};
    let max = Math.round(Math.random() * 24) + 8;
    for (let m = 0; m <= 12; m++) {
      for (let d = 0; d <= 31; d++) {
        let key = `${year}-${("0" + m).slice(-2)}-${("0" + d).slice(-2)}`;
        map[key] = Math.round(Math.random() * max);
      }
    }
    data = map;
  }
  fillMap();
</script>

<div style="font-size:12px">
  <Heatmap
    {data}
    onclick={(e) => alert(`${e.target.dataset.date} | ${e.target.dataset.value}`)}
  />
</div>

⚙️ Props

• data - Object containing the chart data. Each key must be in ISO date format. { '2025-01-02': 5 } (required)
• colors - Array of colors to use for the chart, ordered from lowest to highest. (default = GitHub's graph colors)
• year - The heatmap year. (default = current year)
• lday - Adds day labels. (default = true)
• lmonth - Adds month labels. (default = true)
• onclick - onclick event.
• onmouseout - onmouseout event.
• onmouseover - onmouseover event.

[!NOTE] The heatmap size is determined by the parent element's font size, as it uses em units.

📜 License

• svelte - MIT
• sveltekit - MIT
• svelte5-heatmap - MIT