DitherCharts

Heatmap chart

Updated

HeatmapChart draws one square per day, a column per week, its ink in 5 steps from empty to the busiest day. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Heatmap

A year of contributions, a square per day

Heatmap

Install it:

npx dithercharts add heatmap-chart

Then use it:

import { HeatmapChart } from "@/components/dithercharts/heatmap-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "2025-11-02", count: 0 },
  { date: "2025-11-03", count: 0 },
  { date: "2025-11-04", count: 8 },
  { date: "2025-11-05", count: 5 },
  { date: "2025-11-06", count: 4 },
  { date: "2025-11-07", count: 8 },
  { date: "2025-11-08", count: 4 },
  { date: "2025-11-09", count: 3 },
  { date: "2025-11-10", count: 5 },
  { date: "2025-11-11", count: 0 },
  { date: "2025-11-12", count: 0 },
  { date: "2025-11-13", count: 12 },
  { date: "2025-11-14", count: 9 },
  { date: "2025-11-15", count: 2 },
  { date: "2025-11-16", count: 3 },
  { date: "2025-11-17", count: 11 },
  { date: "2025-11-18", count: 12 },
  { date: "2025-11-19", count: 9 },
  { date: "2025-11-20", count: 0 },
  { date: "2025-11-21", count: 0 },
  { date: "2025-11-22", count: 4 },
  { date: "2025-11-23", count: 4 },
  { date: "2025-11-24", count: 9 },
  { date: "2025-11-25", count: 8 },
  { date: "2025-11-26", count: 10 },
  { date: "2025-11-27", count: 13 },
  { date: "2025-11-28", count: 13 },
  { date: "2025-11-29", count: 0 },
  { date: "2025-11-30", count: 0 },
  { date: "2025-12-01", count: 11 },
  { date: "2025-12-02", count: 14 },
  { date: "2025-12-03", count: 13 },
  { date: "2025-12-04", count: 9 },
  { date: "2025-12-05", count: 8 },
  { date: "2025-12-06", count: 4 },
  { date: "2025-12-07", count: 5 },
  { date: "2025-12-08", count: 0 },
  { date: "2025-12-09", count: 0 },
  { date: "2025-12-10", count: 8 },
  { date: "2025-12-11", count: 12 },
  { date: "2025-12-12", count: 14 },
  { date: "2025-12-13", count: 4 },
  { date: "2025-12-14", count: 3 },
  { date: "2025-12-15", count: 8 },
  { date: "2025-12-16", count: 12 },
  { date: "2025-12-17", count: 0 },
  { date: "2025-12-18", count: 0 },
  { date: "2025-12-19", count: 7 },
  { date: "2025-12-20", count: 3 },
  { date: "2025-12-21", count: 4 },
  { date: "2025-12-22", count: 11 },
  { date: "2025-12-23", count: 8 },
  { date: "2025-12-24", count: 6 },
  { date: "2025-12-25", count: 8 },
  { date: "2025-12-26", count: 0 },
  { date: "2025-12-27", count: 0 },
  { date: "2025-12-28", count: 2 },
  { date: "2025-12-29", count: 5 },
  { date: "2025-12-30", count: 7 },
  { date: "2025-12-31", count: 10 },
  { date: "2026-01-01", count: 8 },
  { date: "2026-01-02", count: 4 },
  { date: "2026-01-03", count: 1 },
  { date: "2026-01-04", count: 0 },
  { date: "2026-01-05", count: 0 },
  { date: "2026-01-06", count: 6 },
  { date: "2026-01-07", count: 3 },
  { date: "2026-01-08", count: 3 },
  { date: "2026-01-09", count: 6 },
  { date: "2026-01-10", count: 3 },
  { date: "2026-01-11", count: 2 },
  { date: "2026-01-12", count: 1 },
  { date: "2026-01-13", count: 0 },
  { date: "2026-01-14", count: 0 },
  { date: "2026-01-15", count: 6 },
  { date: "2026-01-16", count: 3 },
  { date: "2026-01-17", count: 0 },
  { date: "2026-01-18", count: 1 },
  { date: "2026-01-19", count: 5 },
  { date: "2026-01-20", count: 5 },
  { date: "2026-01-21", count: 1 },
  { date: "2026-01-22", count: 0 },
  { date: "2026-01-23", count: 0 },
  { date: "2026-01-24", count: 2 },
  { date: "2026-01-25", count: 1 },
  { date: "2026-01-26", count: 0 },
  { date: "2026-01-27", count: 0 },
  { date: "2026-01-28", count: 1 },
  { date: "2026-01-29", count: 4 },
  { date: "2026-01-30", count: 3 },
  { date: "2026-01-31", count: 0 },
  { date: "2026-02-01", count: 0 },
  { date: "2026-02-02", count: 2 },
  { date: "2026-02-03", count: 4 },
  { date: "2026-02-04", count: 2 },
  { date: "2026-02-05", count: 0 },
  { date: "2026-02-06", count: 0 },
  { date: "2026-02-07", count: 1 },
  { date: "2026-02-08", count: 1 },
  { date: "2026-02-09", count: 0 },
  { date: "2026-02-10", count: 0 },
  { date: "2026-02-11", count: 0 },
  { date: "2026-02-12", count: 3 },
  { date: "2026-02-13", count: 4 },
  { date: "2026-02-14", count: 0 },
  { date: "2026-02-15", count: 0 },
  { date: "2026-02-16", count: 1 },
  { date: "2026-02-17", count: 4 },
  { date: "2026-02-18", count: 0 },
  { date: "2026-02-19", count: 0 },
  { date: "2026-02-20", count: 0 },
  { date: "2026-02-21", count: 1 },
  { date: "2026-02-22", count: 2 },
  { date: "2026-02-23", count: 5 },
  { date: "2026-02-24", count: 2 },
  { date: "2026-02-25", count: 1 },
  { date: "2026-02-26", count: 4 },
  { date: "2026-02-27", count: 0 },
  { date: "2026-02-28", count: 0 },
  { date: "2026-03-01", count: 1 },
  { date: "2026-03-02", count: 2 },
  { date: "2026-03-03", count: 6 },
  { date: "2026-03-04", count: 8 },
  { date: "2026-03-05", count: 6 },
  { date: "2026-03-06", count: 3 },
  { date: "2026-03-07", count: 1 },
  { date: "2026-03-08", count: 0 },
  { date: "2026-03-09", count: 0 },
  { date: "2026-03-10", count: 7 },
  { date: "2026-03-11", count: 4 },
  { date: "2026-03-12", count: 5 },
  { date: "2026-03-13", count: 9 },
  { date: "2026-03-14", count: 4 },
  { date: "2026-03-15", count: 3 },
  { date: "2026-03-16", count: 5 },
  { date: "2026-03-17", count: 0 },
  { date: "2026-03-18", count: 0 },
  { date: "2026-03-19", count: 11 },
  { date: "2026-03-20", count: 8 },
  { date: "2026-03-21", count: 2 },
  { date: "2026-03-22", count: 3 },
  { date: "2026-03-23", count: 12 },
  { date: "2026-03-24", count: 12 },
  { date: "2026-03-25", count: 8 },
  { date: "2026-03-26", count: 0 },
  { date: "2026-03-27", count: 0 },
  { date: "2026-03-28", count: 5 },
  { date: "2026-03-29", count: 4 },
  { date: "2026-03-30", count: 8 },
  { date: "2026-03-31", count: 8 },
  { date: "2026-04-01", count: 11 },
  { date: "2026-04-02", count: 14 },
  { date: "2026-04-03", count: 12 },
  { date: "2026-04-04", count: 0 },
  { date: "2026-04-05", count: 0 },
  { date: "2026-04-06", count: 12 },
  { date: "2026-04-07", count: 14 },
  { date: "2026-04-08", count: 11 },
  { date: "2026-04-09", count: 8 },
  { date: "2026-04-10", count: 9 },
  { date: "2026-04-11", count: 4 },
  { date: "2026-04-12", count: 5 },
  { date: "2026-04-13", count: 0 },
  { date: "2026-04-14", count: 0 },
  { date: "2026-04-15", count: 9 },
  { date: "2026-04-16", count: 13 },
  { date: "2026-04-17", count: 13 },
  { date: "2026-04-18", count: 3 },
  { date: "2026-04-19", count: 3 },
  { date: "2026-04-20", count: 10 },
  { date: "2026-04-21", count: 13 },
  { date: "2026-04-22", count: 0 },
  { date: "2026-04-23", count: 0 },
  { date: "2026-04-24", count: 7 },
  { date: "2026-04-25", count: 3 },
  { date: "2026-04-26", count: 4 },
  { date: "2026-04-27", count: 10 },
  { date: "2026-04-28", count: 7 },
  { date: "2026-04-29", count: 6 },
  { date: "2026-04-30", count: 9 },
  { date: "2026-05-01", count: 0 },
  { date: "2026-05-02", count: 0 },
  { date: "2026-05-03", count: 2 },
  { date: "2026-05-04", count: 5 },
  { date: "2026-05-05", count: 8 },
  { date: "2026-05-06", count: 10 },
  { date: "2026-05-07", count: 7 },
  { date: "2026-05-08", count: 4 },
  { date: "2026-05-09", count: 2 },
  { date: "2026-05-10", count: 0 },
  { date: "2026-05-11", count: 0 },
  { date: "2026-05-12", count: 5 },
  { date: "2026-05-13", count: 2 },
  { date: "2026-05-14", count: 4 },
  { date: "2026-05-15", count: 7 },
  { date: "2026-05-16", count: 2 },
  { date: "2026-05-17", count: 1 },
  { date: "2026-05-18", count: 1 },
  { date: "2026-05-19", count: 0 },
  { date: "2026-05-20", count: 0 },
  { date: "2026-05-21", count: 5 },
  { date: "2026-05-22", count: 2 },
  { date: "2026-05-23", count: 0 },
  { date: "2026-05-24", count: 1 },
  { date: "2026-05-25", count: 5 },
  { date: "2026-05-26", count: 4 },
  { date: "2026-05-27", count: 0 },
  { date: "2026-05-28", count: 0 },
  { date: "2026-05-29", count: 0 },
  { date: "2026-05-30", count: 2 },
  { date: "2026-05-31", count: 1 },
  { date: "2026-06-01", count: 0 },
  { date: "2026-06-02", count: 0 },
  { date: "2026-06-03", count: 3 },
  { date: "2026-06-04", count: 4 },
  { date: "2026-06-05", count: 1 },
  { date: "2026-06-06", count: 0 },
  { date: "2026-06-07", count: 0 },
  { date: "2026-06-08", count: 3 },
  { date: "2026-06-09", count: 4 },
  { date: "2026-06-10", count: 1 },
  { date: "2026-06-11", count: 0 },
  { date: "2026-06-12", count: 0 },
  { date: "2026-06-13", count: 1 },
  { date: "2026-06-14", count: 1 },
  { date: "2026-06-15", count: 0 },
  { date: "2026-06-16", count: 0 },
  { date: "2026-06-17", count: 1 },
  { date: "2026-06-18", count: 4 },
  { date: "2026-06-19", count: 4 },
  { date: "2026-06-20", count: 0 },
  { date: "2026-06-21", count: 0 },
  { date: "2026-06-22", count: 2 },
  { date: "2026-06-23", count: 5 },
  { date: "2026-06-24", count: 0 },
  { date: "2026-06-25", count: 0 },
  { date: "2026-06-26", count: 0 },
  { date: "2026-06-27", count: 1 },
  { date: "2026-06-28", count: 2 },
  { date: "2026-06-29", count: 4 },
  { date: "2026-06-30", count: 1 },
  { date: "2026-07-01", count: 1 },
  { date: "2026-07-02", count: 5 },
  { date: "2026-07-03", count: 0 },
  { date: "2026-07-04", count: 0 },
  { date: "2026-07-05", count: 1 },
  { date: "2026-07-06", count: 3 },
  { date: "2026-07-07", count: 7 },
  { date: "2026-07-08", count: 8 },
  { date: "2026-07-09", count: 5 },
  { date: "2026-07-10", count: 3 },
  { date: "2026-07-11", count: 2 },
  { date: "2026-07-12", count: 0 },
  { date: "2026-07-13", count: 0 },
  { date: "2026-07-14", count: 6 },
  { date: "2026-07-15", count: 4 },
  { date: "2026-07-16", count: 7 },
  { date: "2026-07-17", count: 10 },
  { date: "2026-07-18", count: 3 },
  { date: "2026-07-19", count: 2 },
  { date: "2026-07-20", count: 5 },
  { date: "2026-07-21", count: 0 },
  { date: "2026-07-22", count: 0 },
  { date: "2026-07-23", count: 10 },
  { date: "2026-07-24", count: 7 },
  { date: "2026-07-25", count: 2 },
  { date: "2026-07-26", count: 4 },
  { date: "2026-07-27", count: 13 },
  { date: "2026-07-28", count: 11 },
  { date: "2026-07-29", count: 7 },
  { date: "2026-07-30", count: 0 },
  { date: "2026-07-31", count: 0 },
  { date: "2026-08-01", count: 5 },
  { date: "2026-08-02", count: 4 },
  { date: "2026-08-03", count: 8 },
  { date: "2026-08-04", count: 9 },
  { date: "2026-08-05", count: 13 },
  { date: "2026-08-06", count: 14 },
  { date: "2026-08-07", count: 11 },
  { date: "2026-08-08", count: 0 },
  { date: "2026-08-09", count: 0 },
  { date: "2026-08-10", count: 13 },
  { date: "2026-08-11", count: 13 },
  { date: "2026-08-12", count: 10 },
  { date: "2026-08-13", count: 8 },
  { date: "2026-08-14", count: 10 },
  { date: "2026-08-15", count: 5 },
  { date: "2026-08-16", count: 5 },
  { date: "2026-08-17", count: 0 },
  { date: "2026-08-18", count: 0 },
  { date: "2026-08-19", count: 11 },
  { date: "2026-08-20", count: 13 },
  { date: "2026-08-21", count: 12 },
  { date: "2026-08-22", count: 3 },
  { date: "2026-08-23", count: 3 },
  { date: "2026-08-24", count: 11 },
  { date: "2026-08-25", count: 13 },
  { date: "2026-08-26", count: 0 },
  { date: "2026-08-27", count: 0 },
  { date: "2026-08-28", count: 7 },
  { date: "2026-08-29", count: 4 },
  { date: "2026-08-30", count: 4 },
  { date: "2026-08-31", count: 9 },
  { date: "2026-09-01", count: 6 },
  { date: "2026-09-02", count: 7 },
  { date: "2026-09-03", count: 10 },
  { date: "2026-09-04", count: 0 },
  { date: "2026-09-05", count: 0 },
  { date: "2026-09-06", count: 2 },
  { date: "2026-09-07", count: 6 },
  { date: "2026-09-08", count: 9 },
  { date: "2026-09-09", count: 9 },
  { date: "2026-09-10", count: 6 },
  { date: "2026-09-11", count: 3 },
  { date: "2026-09-12", count: 2 },
  { date: "2026-09-13", count: 0 },
  { date: "2026-09-14", count: 0 },
  { date: "2026-09-15", count: 4 },
  { date: "2026-09-16", count: 2 },
  { date: "2026-09-17", count: 5 },
  { date: "2026-09-18", count: 7 },
  { date: "2026-09-19", count: 2 },
  { date: "2026-09-20", count: 1 },
  { date: "2026-09-21", count: 1 },
  { date: "2026-09-22", count: 0 },
  { date: "2026-09-23", count: 0 },
  { date: "2026-09-24", count: 4 },
  { date: "2026-09-25", count: 1 },
  { date: "2026-09-26", count: 0 },
  { date: "2026-09-27", count: 1 },
  { date: "2026-09-28", count: 5 },
  { date: "2026-09-29", count: 3 },
  { date: "2026-09-30", count: 0 },
  { date: "2026-10-01", count: 0 },
  { date: "2026-10-02", count: 0 },
  { date: "2026-10-03", count: 2 },
  { date: "2026-10-04", count: 0 },
  { date: "2026-10-05", count: 0 },
  { date: "2026-10-06", count: 0 },
  { date: "2026-10-07", count: 4 },
  { date: "2026-10-08", count: 4 },
  { date: "2026-10-09", count: 0 },
  { date: "2026-10-10", count: 0 },
  { date: "2026-10-11", count: 0 },
  { date: "2026-10-12", count: 4 },
  { date: "2026-10-13", count: 3 },
  { date: "2026-10-14", count: 0 },
  { date: "2026-10-15", count: 0 },
  { date: "2026-10-16", count: 1 },
  { date: "2026-10-17", count: 1 },
  { date: "2026-10-18", count: 1 },
  { date: "2026-10-19", count: 0 },
  { date: "2026-10-20", count: 0 },
  { date: "2026-10-21", count: 2 },
  { date: "2026-10-22", count: 4 },
  { date: "2026-10-23", count: 2 },
  { date: "2026-10-24", count: 0 },
  { date: "2026-10-25", count: 0 },
  { date: "2026-10-26", count: 3 },
  { date: "2026-10-27", count: 5 },
  { date: "2026-10-28", count: 0 },
  { date: "2026-10-29", count: 0 },
  { date: "2026-10-30", count: 1 },
  { date: "2026-10-31", count: 2 },
]

const chartConfig = {
  count: { label: "Contributions" },
} satisfies ChartConfig

export function ChartHeatmapCalendar() {
  return (
    <HeatmapChart
      data={chartData}
      config={chartConfig}
      dataKey="count"
      label="Contributions in the last year"
    />
  )
}

Installing needs DitherCharts Pro. See pricing.

Contributions in the last year
dateContributions
Nov 2, 20250
Nov 3, 20250
Nov 4, 20258
Nov 5, 20255
Nov 6, 20254
Nov 7, 20258
Nov 8, 20254
Nov 9, 20253
Nov 10, 20255
Nov 11, 20250
Nov 12, 20250
Nov 13, 202512
Nov 14, 20259
Nov 15, 20252
Nov 16, 20253
Nov 17, 202511
Nov 18, 202512
Nov 19, 20259
Nov 20, 20250
Nov 21, 20250
Nov 22, 20254
Nov 23, 20254
Nov 24, 20259
Nov 25, 20258
Nov 26, 202510
Nov 27, 202513
Nov 28, 202513
Nov 29, 20250
Nov 30, 20250
Dec 1, 202511
Dec 2, 202514
Dec 3, 202513
Dec 4, 20259
Dec 5, 20258
Dec 6, 20254
Dec 7, 20255
Dec 8, 20250
Dec 9, 20250
Dec 10, 20258
Dec 11, 202512
Dec 12, 202514
Dec 13, 20254
Dec 14, 20253
Dec 15, 20258
Dec 16, 202512
Dec 17, 20250
Dec 18, 20250
Dec 19, 20257
Dec 20, 20253
Dec 21, 20254
Dec 22, 202511
Dec 23, 20258
Dec 24, 20256
Dec 25, 20258
Dec 26, 20250
Dec 27, 20250
Dec 28, 20252
Dec 29, 20255
Dec 30, 20257
Dec 31, 202510
Jan 1, 20268
Jan 2, 20264
Jan 3, 20261
Jan 4, 20260
Jan 5, 20260
Jan 6, 20266
Jan 7, 20263
Jan 8, 20263
Jan 9, 20266
Jan 10, 20263
Jan 11, 20262
Jan 12, 20261
Jan 13, 20260
Jan 14, 20260
Jan 15, 20266
Jan 16, 20263
Jan 17, 20260
Jan 18, 20261
Jan 19, 20265
Jan 20, 20265
Jan 21, 20261
Jan 22, 20260
Jan 23, 20260
Jan 24, 20262
Jan 25, 20261
Jan 26, 20260
Jan 27, 20260
Jan 28, 20261
Jan 29, 20264
Jan 30, 20263
Jan 31, 20260
Feb 1, 20260
Feb 2, 20262
Feb 3, 20264
Feb 4, 20262
Feb 5, 20260
Feb 6, 20260
Feb 7, 20261
Feb 8, 20261
Feb 9, 20260
Feb 10, 20260
Feb 11, 20260
Feb 12, 20263
Feb 13, 20264
Feb 14, 20260
Feb 15, 20260
Feb 16, 20261
Feb 17, 20264
Feb 18, 20260
Feb 19, 20260
Feb 20, 20260
Feb 21, 20261
Feb 22, 20262
Feb 23, 20265
Feb 24, 20262
Feb 25, 20261
Feb 26, 20264
Feb 27, 20260
Feb 28, 20260
Mar 1, 20261
Mar 2, 20262
Mar 3, 20266
Mar 4, 20268
Mar 5, 20266
Mar 6, 20263
Mar 7, 20261
Mar 8, 20260
Mar 9, 20260
Mar 10, 20267
Mar 11, 20264
Mar 12, 20265
Mar 13, 20269
Mar 14, 20264
Mar 15, 20263
Mar 16, 20265
Mar 17, 20260
Mar 18, 20260
Mar 19, 202611
Mar 20, 20268
Mar 21, 20262
Mar 22, 20263
Mar 23, 202612
Mar 24, 202612
Mar 25, 20268
Mar 26, 20260
Mar 27, 20260
Mar 28, 20265
Mar 29, 20264
Mar 30, 20268
Mar 31, 20268
Apr 1, 202611
Apr 2, 202614
Apr 3, 202612
Apr 4, 20260
Apr 5, 20260
Apr 6, 202612
Apr 7, 202614
Apr 8, 202611
Apr 9, 20268
Apr 10, 20269
Apr 11, 20264
Apr 12, 20265
Apr 13, 20260
Apr 14, 20260
Apr 15, 20269
Apr 16, 202613
Apr 17, 202613
Apr 18, 20263
Apr 19, 20263
Apr 20, 202610
Apr 21, 202613
Apr 22, 20260
Apr 23, 20260
Apr 24, 20267
Apr 25, 20263
Apr 26, 20264
Apr 27, 202610
Apr 28, 20267
Apr 29, 20266
Apr 30, 20269
May 1, 20260
May 2, 20260
May 3, 20262
May 4, 20265
May 5, 20268
May 6, 202610
May 7, 20267
May 8, 20264
May 9, 20262
May 10, 20260
May 11, 20260
May 12, 20265
May 13, 20262
May 14, 20264
May 15, 20267
May 16, 20262
May 17, 20261
May 18, 20261
May 19, 20260
May 20, 20260
May 21, 20265
May 22, 20262
May 23, 20260
May 24, 20261
May 25, 20265
May 26, 20264
May 27, 20260
May 28, 20260
May 29, 20260
May 30, 20262
May 31, 20261
Jun 1, 20260
Jun 2, 20260
Jun 3, 20263
Jun 4, 20264
Jun 5, 20261
Jun 6, 20260
Jun 7, 20260
Jun 8, 20263
Jun 9, 20264
Jun 10, 20261
Jun 11, 20260
Jun 12, 20260
Jun 13, 20261
Jun 14, 20261
Jun 15, 20260
Jun 16, 20260
Jun 17, 20261
Jun 18, 20264
Jun 19, 20264
Jun 20, 20260
Jun 21, 20260
Jun 22, 20262
Jun 23, 20265
Jun 24, 20260
Jun 25, 20260
Jun 26, 20260
Jun 27, 20261
Jun 28, 20262
Jun 29, 20264
Jun 30, 20261
Jul 1, 20261
Jul 2, 20265
Jul 3, 20260
Jul 4, 20260
Jul 5, 20261
Jul 6, 20263
Jul 7, 20267
Jul 8, 20268
Jul 9, 20265
Jul 10, 20263
Jul 11, 20262
Jul 12, 20260
Jul 13, 20260
Jul 14, 20266
Jul 15, 20264
Jul 16, 20267
Jul 17, 202610
Jul 18, 20263
Jul 19, 20262
Jul 20, 20265
Jul 21, 20260
Jul 22, 20260
Jul 23, 202610
Jul 24, 20267
Jul 25, 20262
Jul 26, 20264
Jul 27, 202613
Jul 28, 202611
Jul 29, 20267
Jul 30, 20260
Jul 31, 20260
Aug 1, 20265
Aug 2, 20264
Aug 3, 20268
Aug 4, 20269
Aug 5, 202613
Aug 6, 202614
Aug 7, 202611
Aug 8, 20260
Aug 9, 20260
Aug 10, 202613
Aug 11, 202613
Aug 12, 202610
Aug 13, 20268
Aug 14, 202610
Aug 15, 20265
Aug 16, 20265
Aug 17, 20260
Aug 18, 20260
Aug 19, 202611
Aug 20, 202613
Aug 21, 202612
Aug 22, 20263
Aug 23, 20263
Aug 24, 202611
Aug 25, 202613
Aug 26, 20260
Aug 27, 20260
Aug 28, 20267
Aug 29, 20264
Aug 30, 20264
Aug 31, 20269
Sep 1, 20266
Sep 2, 20267
Sep 3, 202610
Sep 4, 20260
Sep 5, 20260
Sep 6, 20262
Sep 7, 20266
Sep 8, 20269
Sep 9, 20269
Sep 10, 20266
Sep 11, 20263
Sep 12, 20262
Sep 13, 20260
Sep 14, 20260
Sep 15, 20264
Sep 16, 20262
Sep 17, 20265
Sep 18, 20267
Sep 19, 20262
Sep 20, 20261
Sep 21, 20261
Sep 22, 20260
Sep 23, 20260
Sep 24, 20264
Sep 25, 20261
Sep 26, 20260
Sep 27, 20261
Sep 28, 20265
Sep 29, 20263
Sep 30, 20260
Oct 1, 20260
Oct 2, 20260
Oct 3, 20262
Oct 4, 20260
Oct 5, 20260
Oct 6, 20260
Oct 7, 20264
Oct 8, 20264
Oct 9, 20260
Oct 10, 20260
Oct 11, 20260
Oct 12, 20264
Oct 13, 20263
Oct 14, 20260
Oct 15, 20260
Oct 16, 20261
Oct 17, 20261
Oct 18, 20261
Oct 19, 20260
Oct 20, 20260
Oct 21, 20262
Oct 22, 20264
Oct 23, 20262
Oct 24, 20260
Oct 25, 20260
Oct 26, 20263
Oct 27, 20265
Oct 28, 20260
Oct 29, 20260
Oct 30, 20261
Oct 31, 20262
import { HeatmapChart } from "@/components/dithercharts/heatmap-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { date: "2025-11-02", count: 0 },
  { date: "2025-11-03", count: 0 },
  { date: "2025-11-04", count: 8 },
  { date: "2025-11-05", count: 5 },
  { date: "2025-11-06", count: 4 },
  { date: "2025-11-07", count: 8 },
  { date: "2025-11-08", count: 4 },
  { date: "2025-11-09", count: 3 },
  { date: "2025-11-10", count: 5 },
  { date: "2025-11-11", count: 0 },
  { date: "2025-11-12", count: 0 },
  { date: "2025-11-13", count: 12 },
  { date: "2025-11-14", count: 9 },
  { date: "2025-11-15", count: 2 },
  { date: "2025-11-16", count: 3 },
  { date: "2025-11-17", count: 11 },
  { date: "2025-11-18", count: 12 },
  { date: "2025-11-19", count: 9 },
  { date: "2025-11-20", count: 0 },
  { date: "2025-11-21", count: 0 },
  { date: "2025-11-22", count: 4 },
  { date: "2025-11-23", count: 4 },
  { date: "2025-11-24", count: 9 },
  { date: "2025-11-25", count: 8 },
  { date: "2025-11-26", count: 10 },
  { date: "2025-11-27", count: 13 },
  { date: "2025-11-28", count: 13 },
  { date: "2025-11-29", count: 0 },
  { date: "2025-11-30", count: 0 },
  { date: "2025-12-01", count: 11 },
  { date: "2025-12-02", count: 14 },
  { date: "2025-12-03", count: 13 },
  { date: "2025-12-04", count: 9 },
  { date: "2025-12-05", count: 8 },
  { date: "2025-12-06", count: 4 },
  { date: "2025-12-07", count: 5 },
  { date: "2025-12-08", count: 0 },
  { date: "2025-12-09", count: 0 },
  { date: "2025-12-10", count: 8 },
  { date: "2025-12-11", count: 12 },
  { date: "2025-12-12", count: 14 },
  { date: "2025-12-13", count: 4 },
  { date: "2025-12-14", count: 3 },
  { date: "2025-12-15", count: 8 },
  { date: "2025-12-16", count: 12 },
  { date: "2025-12-17", count: 0 },
  { date: "2025-12-18", count: 0 },
  { date: "2025-12-19", count: 7 },
  { date: "2025-12-20", count: 3 },
  { date: "2025-12-21", count: 4 },
  { date: "2025-12-22", count: 11 },
  { date: "2025-12-23", count: 8 },
  { date: "2025-12-24", count: 6 },
  { date: "2025-12-25", count: 8 },
  { date: "2025-12-26", count: 0 },
  { date: "2025-12-27", count: 0 },
  { date: "2025-12-28", count: 2 },
  { date: "2025-12-29", count: 5 },
  { date: "2025-12-30", count: 7 },
  { date: "2025-12-31", count: 10 },
  { date: "2026-01-01", count: 8 },
  { date: "2026-01-02", count: 4 },
  { date: "2026-01-03", count: 1 },
  { date: "2026-01-04", count: 0 },
  { date: "2026-01-05", count: 0 },
  { date: "2026-01-06", count: 6 },
  { date: "2026-01-07", count: 3 },
  { date: "2026-01-08", count: 3 },
  { date: "2026-01-09", count: 6 },
  { date: "2026-01-10", count: 3 },
  { date: "2026-01-11", count: 2 },
  { date: "2026-01-12", count: 1 },
  { date: "2026-01-13", count: 0 },
  { date: "2026-01-14", count: 0 },
  { date: "2026-01-15", count: 6 },
  { date: "2026-01-16", count: 3 },
  { date: "2026-01-17", count: 0 },
  { date: "2026-01-18", count: 1 },
  { date: "2026-01-19", count: 5 },
  { date: "2026-01-20", count: 5 },
  { date: "2026-01-21", count: 1 },
  { date: "2026-01-22", count: 0 },
  { date: "2026-01-23", count: 0 },
  { date: "2026-01-24", count: 2 },
  { date: "2026-01-25", count: 1 },
  { date: "2026-01-26", count: 0 },
  { date: "2026-01-27", count: 0 },
  { date: "2026-01-28", count: 1 },
  { date: "2026-01-29", count: 4 },
  { date: "2026-01-30", count: 3 },
  { date: "2026-01-31", count: 0 },
  { date: "2026-02-01", count: 0 },
  { date: "2026-02-02", count: 2 },
  { date: "2026-02-03", count: 4 },
  { date: "2026-02-04", count: 2 },
  { date: "2026-02-05", count: 0 },
  { date: "2026-02-06", count: 0 },
  { date: "2026-02-07", count: 1 },
  { date: "2026-02-08", count: 1 },
  { date: "2026-02-09", count: 0 },
  { date: "2026-02-10", count: 0 },
  { date: "2026-02-11", count: 0 },
  { date: "2026-02-12", count: 3 },
  { date: "2026-02-13", count: 4 },
  { date: "2026-02-14", count: 0 },
  { date: "2026-02-15", count: 0 },
  { date: "2026-02-16", count: 1 },
  { date: "2026-02-17", count: 4 },
  { date: "2026-02-18", count: 0 },
  { date: "2026-02-19", count: 0 },
  { date: "2026-02-20", count: 0 },
  { date: "2026-02-21", count: 1 },
  { date: "2026-02-22", count: 2 },
  { date: "2026-02-23", count: 5 },
  { date: "2026-02-24", count: 2 },
  { date: "2026-02-25", count: 1 },
  { date: "2026-02-26", count: 4 },
  { date: "2026-02-27", count: 0 },
  { date: "2026-02-28", count: 0 },
  { date: "2026-03-01", count: 1 },
  { date: "2026-03-02", count: 2 },
  { date: "2026-03-03", count: 6 },
  { date: "2026-03-04", count: 8 },
  { date: "2026-03-05", count: 6 },
  { date: "2026-03-06", count: 3 },
  { date: "2026-03-07", count: 1 },
  { date: "2026-03-08", count: 0 },
  { date: "2026-03-09", count: 0 },
  { date: "2026-03-10", count: 7 },
  { date: "2026-03-11", count: 4 },
  { date: "2026-03-12", count: 5 },
  { date: "2026-03-13", count: 9 },
  { date: "2026-03-14", count: 4 },
  { date: "2026-03-15", count: 3 },
  { date: "2026-03-16", count: 5 },
  { date: "2026-03-17", count: 0 },
  { date: "2026-03-18", count: 0 },
  { date: "2026-03-19", count: 11 },
  { date: "2026-03-20", count: 8 },
  { date: "2026-03-21", count: 2 },
  { date: "2026-03-22", count: 3 },
  { date: "2026-03-23", count: 12 },
  { date: "2026-03-24", count: 12 },
  { date: "2026-03-25", count: 8 },
  { date: "2026-03-26", count: 0 },
  { date: "2026-03-27", count: 0 },
  { date: "2026-03-28", count: 5 },
  { date: "2026-03-29", count: 4 },
  { date: "2026-03-30", count: 8 },
  { date: "2026-03-31", count: 8 },
  { date: "2026-04-01", count: 11 },
  { date: "2026-04-02", count: 14 },
  { date: "2026-04-03", count: 12 },
  { date: "2026-04-04", count: 0 },
  { date: "2026-04-05", count: 0 },
  { date: "2026-04-06", count: 12 },
  { date: "2026-04-07", count: 14 },
  { date: "2026-04-08", count: 11 },
  { date: "2026-04-09", count: 8 },
  { date: "2026-04-10", count: 9 },
  { date: "2026-04-11", count: 4 },
  { date: "2026-04-12", count: 5 },
  { date: "2026-04-13", count: 0 },
  { date: "2026-04-14", count: 0 },
  { date: "2026-04-15", count: 9 },
  { date: "2026-04-16", count: 13 },
  { date: "2026-04-17", count: 13 },
  { date: "2026-04-18", count: 3 },
  { date: "2026-04-19", count: 3 },
  { date: "2026-04-20", count: 10 },
  { date: "2026-04-21", count: 13 },
  { date: "2026-04-22", count: 0 },
  { date: "2026-04-23", count: 0 },
  { date: "2026-04-24", count: 7 },
  { date: "2026-04-25", count: 3 },
  { date: "2026-04-26", count: 4 },
  { date: "2026-04-27", count: 10 },
  { date: "2026-04-28", count: 7 },
  { date: "2026-04-29", count: 6 },
  { date: "2026-04-30", count: 9 },
  { date: "2026-05-01", count: 0 },
  { date: "2026-05-02", count: 0 },
  { date: "2026-05-03", count: 2 },
  { date: "2026-05-04", count: 5 },
  { date: "2026-05-05", count: 8 },
  { date: "2026-05-06", count: 10 },
  { date: "2026-05-07", count: 7 },
  { date: "2026-05-08", count: 4 },
  { date: "2026-05-09", count: 2 },
  { date: "2026-05-10", count: 0 },
  { date: "2026-05-11", count: 0 },
  { date: "2026-05-12", count: 5 },
  { date: "2026-05-13", count: 2 },
  { date: "2026-05-14", count: 4 },
  { date: "2026-05-15", count: 7 },
  { date: "2026-05-16", count: 2 },
  { date: "2026-05-17", count: 1 },
  { date: "2026-05-18", count: 1 },
  { date: "2026-05-19", count: 0 },
  { date: "2026-05-20", count: 0 },
  { date: "2026-05-21", count: 5 },
  { date: "2026-05-22", count: 2 },
  { date: "2026-05-23", count: 0 },
  { date: "2026-05-24", count: 1 },
  { date: "2026-05-25", count: 5 },
  { date: "2026-05-26", count: 4 },
  { date: "2026-05-27", count: 0 },
  { date: "2026-05-28", count: 0 },
  { date: "2026-05-29", count: 0 },
  { date: "2026-05-30", count: 2 },
  { date: "2026-05-31", count: 1 },
  { date: "2026-06-01", count: 0 },
  { date: "2026-06-02", count: 0 },
  { date: "2026-06-03", count: 3 },
  { date: "2026-06-04", count: 4 },
  { date: "2026-06-05", count: 1 },
  { date: "2026-06-06", count: 0 },
  { date: "2026-06-07", count: 0 },
  { date: "2026-06-08", count: 3 },
  { date: "2026-06-09", count: 4 },
  { date: "2026-06-10", count: 1 },
  { date: "2026-06-11", count: 0 },
  { date: "2026-06-12", count: 0 },
  { date: "2026-06-13", count: 1 },
  { date: "2026-06-14", count: 1 },
  { date: "2026-06-15", count: 0 },
  { date: "2026-06-16", count: 0 },
  { date: "2026-06-17", count: 1 },
  { date: "2026-06-18", count: 4 },
  { date: "2026-06-19", count: 4 },
  { date: "2026-06-20", count: 0 },
  { date: "2026-06-21", count: 0 },
  { date: "2026-06-22", count: 2 },
  { date: "2026-06-23", count: 5 },
  { date: "2026-06-24", count: 0 },
  { date: "2026-06-25", count: 0 },
  { date: "2026-06-26", count: 0 },
  { date: "2026-06-27", count: 1 },
  { date: "2026-06-28", count: 2 },
  { date: "2026-06-29", count: 4 },
  { date: "2026-06-30", count: 1 },
  { date: "2026-07-01", count: 1 },
  { date: "2026-07-02", count: 5 },
  { date: "2026-07-03", count: 0 },
  { date: "2026-07-04", count: 0 },
  { date: "2026-07-05", count: 1 },
  { date: "2026-07-06", count: 3 },
  { date: "2026-07-07", count: 7 },
  { date: "2026-07-08", count: 8 },
  { date: "2026-07-09", count: 5 },
  { date: "2026-07-10", count: 3 },
  { date: "2026-07-11", count: 2 },
  { date: "2026-07-12", count: 0 },
  { date: "2026-07-13", count: 0 },
  { date: "2026-07-14", count: 6 },
  { date: "2026-07-15", count: 4 },
  { date: "2026-07-16", count: 7 },
  { date: "2026-07-17", count: 10 },
  { date: "2026-07-18", count: 3 },
  { date: "2026-07-19", count: 2 },
  { date: "2026-07-20", count: 5 },
  { date: "2026-07-21", count: 0 },
  { date: "2026-07-22", count: 0 },
  { date: "2026-07-23", count: 10 },
  { date: "2026-07-24", count: 7 },
  { date: "2026-07-25", count: 2 },
  { date: "2026-07-26", count: 4 },
  { date: "2026-07-27", count: 13 },
  { date: "2026-07-28", count: 11 },
  { date: "2026-07-29", count: 7 },
  { date: "2026-07-30", count: 0 },
  { date: "2026-07-31", count: 0 },
  { date: "2026-08-01", count: 5 },
  { date: "2026-08-02", count: 4 },
  { date: "2026-08-03", count: 8 },
  { date: "2026-08-04", count: 9 },
  { date: "2026-08-05", count: 13 },
  { date: "2026-08-06", count: 14 },
  { date: "2026-08-07", count: 11 },
  { date: "2026-08-08", count: 0 },
  { date: "2026-08-09", count: 0 },
  { date: "2026-08-10", count: 13 },
  { date: "2026-08-11", count: 13 },
  { date: "2026-08-12", count: 10 },
  { date: "2026-08-13", count: 8 },
  { date: "2026-08-14", count: 10 },
  { date: "2026-08-15", count: 5 },
  { date: "2026-08-16", count: 5 },
  { date: "2026-08-17", count: 0 },
  { date: "2026-08-18", count: 0 },
  { date: "2026-08-19", count: 11 },
  { date: "2026-08-20", count: 13 },
  { date: "2026-08-21", count: 12 },
  { date: "2026-08-22", count: 3 },
  { date: "2026-08-23", count: 3 },
  { date: "2026-08-24", count: 11 },
  { date: "2026-08-25", count: 13 },
  { date: "2026-08-26", count: 0 },
  { date: "2026-08-27", count: 0 },
  { date: "2026-08-28", count: 7 },
  { date: "2026-08-29", count: 4 },
  { date: "2026-08-30", count: 4 },
  { date: "2026-08-31", count: 9 },
  { date: "2026-09-01", count: 6 },
  { date: "2026-09-02", count: 7 },
  { date: "2026-09-03", count: 10 },
  { date: "2026-09-04", count: 0 },
  { date: "2026-09-05", count: 0 },
  { date: "2026-09-06", count: 2 },
  { date: "2026-09-07", count: 6 },
  { date: "2026-09-08", count: 9 },
  { date: "2026-09-09", count: 9 },
  { date: "2026-09-10", count: 6 },
  { date: "2026-09-11", count: 3 },
  { date: "2026-09-12", count: 2 },
  { date: "2026-09-13", count: 0 },
  { date: "2026-09-14", count: 0 },
  { date: "2026-09-15", count: 4 },
  { date: "2026-09-16", count: 2 },
  { date: "2026-09-17", count: 5 },
  { date: "2026-09-18", count: 7 },
  { date: "2026-09-19", count: 2 },
  { date: "2026-09-20", count: 1 },
  { date: "2026-09-21", count: 1 },
  { date: "2026-09-22", count: 0 },
  { date: "2026-09-23", count: 0 },
  { date: "2026-09-24", count: 4 },
  { date: "2026-09-25", count: 1 },
  { date: "2026-09-26", count: 0 },
  { date: "2026-09-27", count: 1 },
  { date: "2026-09-28", count: 5 },
  { date: "2026-09-29", count: 3 },
  { date: "2026-09-30", count: 0 },
  { date: "2026-10-01", count: 0 },
  { date: "2026-10-02", count: 0 },
  { date: "2026-10-03", count: 2 },
  { date: "2026-10-04", count: 0 },
  { date: "2026-10-05", count: 0 },
  { date: "2026-10-06", count: 0 },
  { date: "2026-10-07", count: 4 },
  { date: "2026-10-08", count: 4 },
  { date: "2026-10-09", count: 0 },
  { date: "2026-10-10", count: 0 },
  { date: "2026-10-11", count: 0 },
  { date: "2026-10-12", count: 4 },
  { date: "2026-10-13", count: 3 },
  { date: "2026-10-14", count: 0 },
  { date: "2026-10-15", count: 0 },
  { date: "2026-10-16", count: 1 },
  { date: "2026-10-17", count: 1 },
  { date: "2026-10-18", count: 1 },
  { date: "2026-10-19", count: 0 },
  { date: "2026-10-20", count: 0 },
  { date: "2026-10-21", count: 2 },
  { date: "2026-10-22", count: 4 },
  { date: "2026-10-23", count: 2 },
  { date: "2026-10-24", count: 0 },
  { date: "2026-10-25", count: 0 },
  { date: "2026-10-26", count: 3 },
  { date: "2026-10-27", count: 5 },
  { date: "2026-10-28", count: 0 },
  { date: "2026-10-29", count: 0 },
  { date: "2026-10-30", count: 1 },
  { date: "2026-10-31", count: 2 },
]

const chartConfig = {
  count: { label: "Contributions" },
} satisfies ChartConfig

export function ChartHeatmapCalendar() {
  return (
    <HeatmapChart
      data={chartData}
      config={chartConfig}
      dataKey="count"
      label="Contributions in the last year"
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add heatmap-chart

Props

HeatmapChart props
PropTypeDefaultDescription
datarequiredType readonly ChartRow[]Default –One row per day, e.g. { date: "2026-03-04", count: 12 }; repeated dates are summed, missing days are 0.
configrequiredType ChartConfigDefault –One entry for dataKey: the value's label in the tooltip and the table twin.
dataKeyrequiredType stringDefault –The row key that holds each day's value, e.g. "count".
dateKeyType stringDefault "date"The row key that holds each day's YYYY-MM-DD date.
labelrequiredType stringDefault –Accessible name, e.g. "Contributions in the last year". Also captions the table twin.
fromType stringDefault –The first day shown, as YYYY-MM-DD. Default: the earliest date in data.
toType stringDefault –The last day shown, as YYYY-MM-DD. Default: the latest date in data.
weekStartType "sunday" | "monday"Default "sunday"The day each week's column starts on.
thresholdsType readonly [number, number, number]Default –The upper bounds of steps 1-3, e.g. [2, 5, 10]; anything above the last is step 4. Default: 4 equal steps of the max.
legendType booleanDefault falseA "Less ... More" scale of the 5 steps under the chart.
tooltipType TooltipOptionsDefault –The tooltip's indicator and label, and the day it opens on at rest.
styleType StyleIdDefault "bayer4"Dither style.
animationType "develop" | "none"Default "develop"Entrance animation; reduced motion always shows the final frame.
cellType numberDefault 2Dither cell size in CSS pixels; a square is 6 cells.
classNameType stringDefault –Classes on the chart's outer figure.

Styles

The dither styles style takes:

  • "bayer2"
  • "bayer4"
  • "bayer8"
  • "blue-noise"
  • "halftone"
  • "crosshatch"
  • "pixel"
  • "stipple"
  • "engraved"
  • "mezzotint"
  • "woodcut"
  • "floyd-steinberg"
  • "atkinson"
  • "riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first day, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
KeyAction
Left arrow Right arrowPrevious / next week
Home EndFirst / last day
Up arrow Down arrowPrevious / next day
EscapeDismiss the cursor

Screen readers

  • The chart's label names it, says how many days it has and lists these keys.
  • Each key press is announced in a polite live region. Moving the pointer is silent.
  • The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
  • With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every heatmap chart example