A Svelte 5 heatmap component inspired by GitHub’s contribution graph
npm install svelte5-heatmap
npm install svelte5-heatmap
`
`svelte
{year}
onclick={(e) => alert(${e.target.dataset.date} | ${e.target.dataset.value})}
/>
`
⚙️ Props
- data (object, required)
An object containing chart data where each key is a date in ISO format (YYYY-MM-DD) and the value is a number.
Example: { '2025-01-02': 5 }
- colors (array, optional)
An array of color values used for the heatmap cells, ordered from the lowest to highest value.
_Default:_ GitHub's contribution graph colors.
- className (string, optional)
Custom CSS class name applied to the heatmap.
_Default:_ "Heatmap"
- year (number, optional)
The year to display in the heatmap.
_Default:_ Current year.
- lday (boolean, optional)
Whether to display day-of-week labels on the left side.
_Default:_ true
- lmonth (boolean, optional)
Whether to display month labels above the calendar.
_Default:_ true
- onclick (function, optional)
Function to be called when a heatmap cell is clicked.
- onmouseover (function, optional)
Function to be called when the mouse hovers over a cell.
- onmouseout` (function, optional)