Heat calendar and returns calendar components for React
Two calendars built for numbers rather than for scheduling. The heat calendar maps a value to a day so a year of activity reads at a glance, and the returns calendar lays monthly performance out in a grid with the year totals beside it. Both are SVG and both take your own scale.
2 components, installable with the shadcn CLI.
Heat Calendar
A calendar heatmap of daily activity such as transactions, trades or API calls, with a readout on hover and a selected span that totals the days.
View componentReturns Calendar
A monthly returns heatmap for funds, strategies and backtests, with a compounded yearly column and spans you select to compound returns.
View component
Questions
- Can I set my own colour scale?
- Yes. The scale is a token driven ramp, so you can match your own palette or invert it for gains and losses.
- What data shape do they take?
- A flat list of date and value pairs. The grid, totals and empty days are worked out from that.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide