React chart example
Calendar heatmap
Show a daily value across a year as a grid of weeks and weekdays.
What is a calendar heatmap?
A calendar heatmap lays days out in the shape of a calendar — weeks along one axis, weekdays along the other — and colours each cell by its value.
When to use it
Use it for daily series over a year or more, where weekday and seasonal patterns matter: activity, incidents, sales. The calendar shape makes weekly rhythm obvious in a way a line chart cannot. Use a line chart when the exact trajectory matters more than the pattern.
Design tips
Keep the cells square and the gaps even; the grid is the calendar.
Use a sequential scale with a legend, and say what the darkest colour means.
Label months along the top rather than every week.
Build this chart in React
Compare with
Use when the axes are general categories rather than calendar time.
Use when sparse cycle intersections are clearer as sized dots.
Graphy Chart SDK
Add Graphy’s calendar heatmaps to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.