Charts
CalendarHeatmapNew in 0.8.0
A contribution-style calendar: one cell per day, columns are weeks, intensity shows the value.
CalendarHeatmapPreview
Cell size
Roundness
LessMore
Click a day
Usage
tsx
import { CalendarHeatmap } from "@vesture/react";
<CalendarHeatmap
year={2026}
weekStart={1}
data={[{ date: "2026-03-02", value: 4 }, { date: "2026-03-03", value: 9 }]}
onDayClick={(date, value) => console.log(date, value)}
/>Behavior
- Dates are ISO YYYY-MM-DD and computed in UTC so cells never shift with the viewer's time zone. Duplicate dates are summed.
- colors defines the levels (index 0 is the empty color). Provide as many as you like.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { date: string; value: number }[] | — | Required. |
| year | number | — | Show Jan 1 – Dec 31 of a year. |
| start / end | string | — | Inclusive ISO range. Default: the 53 weeks ending today. |
| weekStart | 0 | 1 | 6 | 0 | First row of each column (Sun, Mon, Sat). |
| cellSize / gap / cellRadius | number | 12 / 3 / 2 | Cell geometry. |
| colors | string[] | — | One color per level. |
| domain | [number, number] | — | Override the auto-detected value range. |
| showMonthLabels / showWeekdayLabels / showLegend | boolean | true | Chrome. |
| formatTooltip | (date, value) => string | — | Tooltip and aria-label text. |
| onDayClick | (date, value) => void | — | Makes days focusable and clickable. |