Calendar Heatmap

import { WrCalendarHeatmap, type WrHeatmapDatum } from 'ngwr/calendar-heatmap';

@Component({ imports: [WrCalendarHeatmap] })
export class MyComponent {
  // Each cell: { date, value }. Higher value → darker shade.
  protected readonly contributions: WrHeatmapDatum[] = [
    { date: new Date('2026-01-15'), value: 3 },
    { date: new Date('2026-02-04'), value: 8 },
    { date: new Date('2026-03-22'), value: 5 },
    // ... one entry per active day
  ];
}

<wr-calendar-heatmap [data]="contributions" />

MonWedFri

OctNovDecJanFebMarAprMayJunJulAugSep

Name	Description	Type	Default
`data`	—	`readonly WrHeatmapDatum[]`	`[]`
`ariaLabel`	Accessible name of the whole grid. Its cells are bare spans whose `title` a screen reader on a role-less element does not read, so the map used to be several hundred anonymous nodes with no name. Falls back to `calendarHeatmap.label`.	`string \| null`	`null`
`endDate`	Last day to render.	`string \| Date \| null`	`today`
`weeks`	Number of weeks (columns) to render.	`number`	`53`
`cellSize`	Cell side in CSS pixels.	`number`	`11`
`cellGap`	Pixel gap between cells.	`number`	`2`
`color`	Cell fill colour at full intensity.	`string`	`primary`
`emptyColor`	Background colour for zero-value days.	`string`	`light tint`
`showLabels`	Show the weekday + month labels around the grid.	`boolean`	`true`

interface WrHeatmapDatum {
  date: string | Date;
  value: number;
}

Name	Description	Type	Default
`WrHeatmapDatum`	One contribution cell.	`interface`	—
`date`required	ISO date string (YYYY-MM-DD) or Date.	`string \| Date`	—
`value`required	Magnitude — bucketed into intensity steps.	`number`	—

Installation

Basic

API

Types