# Chart Heatmap Matrix

Distribution of traffic and API requests by hour and day of the week.

- id: `chart-heatmap-matrix`
- Page: https://agentic-ui-kit.com/components/chart-heatmap-matrix
- Live preview: https://agentic-ui-kit.com/live/component/chart-heatmap-matrix

## Install

```bash
agentic-ui add chart-heatmap-matrix
npx shadcn@4.17.0 add @agentic-ui/chart-heatmap-matrix
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** hours-by-day-grid, contributions-grid, intensity-scale, cell-tooltip, keyboard-grid-navigation, cell-selection, metric-selector, legend-filtering, empty-state, loading-skeleton, error-fallback
- **Intents:** compare-over-time, show-composition, track-status
- **Suits domains:** analytics, operations, devtools, marketing, project-management
- **Interaction:** cell-hover-tooltip, keyboard-navigation, cell-selection, view-switching, legend-filtering
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** distribution of traffic and API requests by hour and day of the week, history of contributions and commits per developer over the year, frequency of incidents and operational alarms by time slot, volume of marketing campaign opens by time of day, deployment and build activity in CI/CD pipelines
- **Avoid when:** comparing continuous high-frequency series (use a line chart or timeseries), tracking a single simple scalar metric (use stat-card or gauge-kpi)
- **Preserve when adapting:** grid-grammar, interaction-model, keyboard-shortcuts, intensity-scale
- **Replace when adapting:** domain-copy, metric-units, color-palette-tokens, date-formatting
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, badge, tooltip, skeleton, select, tabs
- **Used in:** Marketing Analytics (blueprint)