Heatmap

Heatmap

<ax-heatmap> is a Pro component: a grid of cells colored by value. Use a sequential ramp (one token’s fill-opacity) or bins (mapped to --color-chart-1..5). Self-gates with a PRO watermark until licensed.

Import

import { AxHeatmapComponent } from '@axisui-ng/charts';

Usage

<ax-heatmap
  [matrix]="matrix"
  [rows]="rows"
  [cols]="cols"
  scale="bins"
  ariaLabel="Activity"
/>

matrix = [
  [1, 3, 2],
  [4, 0, 5],
];
rows = ['Mon', 'Tue'];
cols = ['AM', 'Mid', 'PM'];

Inputs

Input	Type	Default	Notes
matrix	number[][]	[]	Row-major cell values.
rows	string[]	[]	Optional row axis labels.
cols	string[]	[]	Optional column axis labels.
scale	'sequential' | 'bins'	'sequential'	Opacity ramp vs chart-palette bins.
bins	number	5	Band count for bins (mapped into chart-1..5).
colorIndex	number	1	Base token (1–5) for sequential.
cellSize	number	28	Cell size in px.
ariaLabel	string	''	Summary; empty → auto (rows × cols, value range).

Accessibility

role="img" with aria-label from ariaLabel or an auto summary. Each cell has a <title> with its value. A visually hidden data table mirrors the matrix for screen readers.

License

Pro component — see ProWatermark for how the watermark/gating works.

Storybook

Interactive examples live in Storybook under Pro / Heatmap. Run pnpm storybook to explore them.