Heatmap Chart
A heatmap/matrix chart for visualizing value density across two dimensions. Built with custom SVG for activity grids, correlation matrices, and intensity maps.
Installation
$ npx shadcn@latest add @orecus/heatmap-chartDependencies:
motion
Registry:
@orecus/chart@orecus/color-utils@orecus/card@orecus/animation@orecus/use-reduced-motion
Component
Activity heatmap showing values across days and hours. Single color with intensity mapping.
Weekly Activity
Interactions per time slot
Quarterly Performance
Scores by metric and quarter
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, any>[] | — | Array of row objects with values for each category |
categories* | string[] | — | Column keys to render as cells |
index* | string | — | Row label field key |
color | ThemeColor | 'primary' | Single color with intensity-based opacity |
colorScale | ThemeColor[] | — | Multi-color scale (2-3 stops) for gradient interpolation |
emptyColor | string | 'transparent' | Color for null/zero cells |
domain | [number, number] | — | Fixed value range for the color scale (e.g. [0, 100] for percentages). Defaults to the data's min→max. Values outside are clamped. Hoist inline arrays to avoid recomputing every render |
variant | 'default' | 'gradient' | 'default' | Color fill variant |
glow | boolean | false | Add glow effect on hovered cell |
showCellValues | boolean | false | Render value text inside cells |
showTooltip | boolean | true | Show tooltip on hover |
showXAxis | boolean | true | Show column labels |
showYAxis | boolean | true | Show row labels |
cellRadius | number | 4 | Cell border radius in px |
cellGap | number | 2 | Gap between cells in px |
valueFormatter | (value: number) => string | — | Format cell values for display |
cardProps | CardProps | — | Props passed to the Card wrapper |