Skip to content
Skribly UI

Skribly products

Theme

ActivityHeatmap

Daily activity over months as a calendar, one column per week, such as commits over a year. Pick it to show rhythm and streaks; pick a bar chart for exact daily counts over a few weeks.

  • ActivityHeatmap

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

Dark theme, ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

High contrast theme, ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

UsageLink to the section Usage

tsx
import { ActivityHeatmap } from '@skribly/ui/charts'
tsx
<ActivityHeatmap
  label="Contributions, last 12 months"
  days={days}
  formatValue={(count) => t('commits', { count })}
  keyboardHint="Arrow keys move by day and by week."
  lessLabel="Less"
  moreLabel="More"
  table={{ trigger: 'Show days with activity', dateHeader: 'Date', valueHeader: 'Commits' }}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

  • One tab stop over the whole calendar.
  • Up and Down move a day, Left and Right a week, Home and End to the ends; each day is read with its full date, its count and its sources through a polite live region, and Escape hides the tooltip.
  • The box scrolls on its own on a narrow screen, opens at the latest week and follows the focus.
  • Shades are steps of one colour, and the count is always in words in the tooltip, the reading and the table.
  • Cells keep an outline and use system colours in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.

Search this site

Arrows move through the results, Enter opens one, Esc closes. Ctrl K /