React chart example
Punch card chart
Show counts across two categorical axes as sized dots.
What is a punch card chart?
A punch card chart places a dot at each intersection of two categorical axes — weekday against hour, say — and sizes it by the count at that cell.
When to use it
Use it for activity patterns across two cycles: commits by day and hour, orders by month and weekday. Size reads more gently than colour for sparse grids. Use a tile heatmap when the grid is dense and colour would be easier to scan.
Design tips
Scale dots by area, not diameter, or large counts are overstated.
Keep the grid spacing even so the axes stay readable behind the dots.
Provide a size legend with two or three reference values.
Build this chart in React
Compare with
Use when a dense grid is easier to scan with colour.
Use when one axis should follow actual calendar dates.
Graphy Chart SDK
Add Graphy’s punch card charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.