'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
ChartsAlea Pro
CalendarHeatmap
Activity per day across a year, like a contribution graph: streaks and quiet weeks at a glance.
import { CalendarHeatmap } from '@alea/pro';
Examples
Contributions
Activity per day; the darker, the more. Arrow keys move day by day.
Steady on weekdays, quiet in August.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-focus…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Component
--alea-chart-1…
Props
CalendarHeatmap props
Activity per day across months, as a contribution graph: streaks and quiet weeks at a glance.
| Prop | Type | Default | Description |
|---|---|---|---|
datarequired | { date: DateValue; value: number; }[] | - | One value per day. |
className | string | - | Extra class names for the root element. |
description | ReactNode | - | One sentence on what the data shows; read before the chart. |
isLoading | boolean | - | Shows a shimmering placeholder while data loads. |
showTable | boolean | true | Shows the table toggle. Default true. |
start | DateValue | - | First day shown. Default 52 weeks before the last date. |
title | ReactNode | - | The title shown above it and read by screen readers. |
valueFormat | ((v: number) => string) | - | Formats values (axis, tooltip, table). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- States
- Keyboard focusPressed (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-calheat.alea-calheat-months.alea-calheat-body.alea-calheat-wd.alea-calheat-grid.alea-calheat-day- Data attributes
data-level=1data-level=2data-level=3data-level=4
Accessibility
- The chart is a figure named by its title and described by its description; the picture has a text summary.
- Tab to the chart, then arrow keys move through the data and each value is announced; Escape leaves.
- The table toggle shows the same data as a real table for everyone who can't use the picture.
Keyboard
| Key | Does |
|---|---|
| Tab | Focuses the chart |
| Left or Right arrow | Previous or next value |
| Home or End | First or last value |
| Escape | Clears the selection |
Do and don't
Do
- Use it for activity per day over months or a year.
- Say in the description what a darker cell means.
Don't
- Don't use it for exact values: use the table or a line chart.