Chart 6 of 15

Calendar heatmap

Use it for daily values over months, when weekday habits and single heavy days are the story. Shading is clipped at the 95th percentile so one huge day does not wash out the rest.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Hover a day for its date and value; click to drill down. The calendar scrolls sideways on a phone.

How to use it

JavaScript
const days = new Map([
  ['2026-01-01', 42.5],
  ['2026-01-02', 0],
  ['2026-01-03', 118.9]
  // ... one entry per day
]);

const chart = calendar({
  days,
  onClick: date => openDay(date),   // 'YYYY-MM-DD'
  label: 'Daily spending calendar'
});

Options

days
A Map of 'YYYY-MM-DD' to number. Missing days inside the range count as zero.
onClick
(dateString) => void.
label
aria-label for the whole graphic.