Calendar Heatmap

Calendar HeatmapPreview

A GitHub-contributions-style heatmap showing daily spending intensity. Each cell represents one day, coloured by how much was spent.

What It Shows

A full-year calendar grid where each day is coloured by spending amount. Low spending days are dark, medium days shift to amber, and high spending days are red. The date range is detected automatically from your data.

Key Features

• Three-colour gradient -- dark (low) to amber (medium) to red (high)
• Colour scale legend -- horizontal gradient at the bottom of the chart
• Week starts Monday
• Day and month labels -- short day names along the side, month names along the top
• Year indicator -- January shows the year (e.g. Jan '26)

Tooltip

Hovering over a day shows the date and spending amount in NZD. Days with zero spending show "No spend".

Interactivity

• Hover -- shadow emphasis on the hovered day cell
• Colour scale -- gradient legend at the bottom showing the range from minimum to maximum spending