AI Components / Heatmap
Heatmap
SVG matrix heatmap for confusion matrices, correlation tables, and feature importance grids. Sequential and diverging color scales, hover tooltips, keyboard navigation, and legend.
ai-vizv0.3.0
Playground
Examples
Confusion matrix
<ai-heatmap title="Model Confusion Matrix" showValues></ai-heatmap>Correlation (diverging)
<ai-heatmap title="Feature Correlation" colorScale="diverging" showValues></ai-heatmap>No values
<ai-heatmap title="Activity Heatmap"></ai-heatmap>Import
import { AiHeatmap } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-heatmap';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[][] | — | 2D data array (rows × cols) |
rowLabels | string[] | — | Row labels |
colLabels | string[] | — | Column labels |
colorScale | "sequential" | "diverging" | "sequential" | Sequential (min→max) or diverging (neg→0→pos) |
showValues | boolean | true | Show values in cells |
title | string | — | Chart title |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-heatmap-cell-click | {row, col, value, rowLabel, colLabel} | Cell clicked |