Charts
Calendar Heatmap
A grid of days, one column per week, shaded by each day's value, with month labels and a table of values.
idle
Usage
Examples
Contributions this year
A year of days, one column per week, shaded in six steps of one hue.
Half a year, weeks from Sunday
A shorter range fits narrow cards; weekStartsOn={0} starts columns on Sunday.
Recommendations
| Guidance | Practice |
|---|---|
| Do | Show up to a year. The grid scrolls sideways in narrow containers rather than shrinking days below a readable size. |
Usage boundaries
| Guidance | Boundary |
|---|---|
| Scope | Dates are calendar days, not instants; convert timestamps to dates in the user's time zone first. |
API reference
Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.
| Prop | Type | Default | Description |
|---|---|---|---|
| | Required | Unique YYYY-MM-DD dates. The grid spans the first to the last date; missing dates and null values show as no data. |
| | Required / "Value" | Names the chart and the measure in tooltips, the legend, and the table. |
| | 1 | Starts weeks on Sunday (0) or Monday (1). |
| | Locale number formatting / "en-US" / "series1" | Formats values and dates, and picks the hue of the sequential scale. |