Heatmap

A GitHub-style contribution/activity heatmap for visualizing daily activity over time.

Playground

Hover over cells to see the value and date:

Less

Props

Midnight

weeks

cellSize

cellGap

cellRadius

showMonthLabels

OffOn

showDayLabels

OffOn

Code

<Heatmap
  data={data}
  theme="midnight"
  weeks={52}
  cellSize={12}
  cellGap={3}
  cellRadius={2}
  showMonthLabels
  showDayLabels
/>

Usage

tsx

import { Heatmap, type HeatmapDataPoint } from '@derpdaderp/chartkit';

const data: HeatmapDataPoint[] = [
  { date: '2024-01-01', value: 5 },
  { date: '2024-01-02', value: 3 },
  { date: '2024-01-03', value: 8 },
  // ...more data
];

<Heatmap
  data={data}
  theme="midnight"
  weeks={52}
  format={(value, date) => `${value} contributions on ${date}`}
/>

Props

Prop	Type	Default	Description
`data*`	`HeatmapDataPoint[]`	-	Array of { date, value } objects
`theme*`	`ThemeName`	-	Theme name
`weeks`	`number`	`52`	Number of weeks to display
`cellSize`	`number`	`12`	Cell size in pixels
`cellGap`	`number`	`3`	Gap between cells
`cellRadius`	`number`	`2`	Cell border radius
`showMonthLabels`	`boolean`	`true`	Show month labels
`showDayLabels`	`boolean`	`true`	Show day labels
`colorScale`	`string[]`	-	Custom color scale array
`format`	`(value, date) => string`	-	Tooltip formatter
`emptyColor`	`string`	-	Color for empty cells