Heatmap for Angular

import { AuiHeatmap } from '@absoluteui/angular/heatmap';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Heatmap page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { heatmap: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiHeatmap } from '@absoluteui/angular/heatmap';

@Component({
  selector: 'app-tickets',
  imports: [AuiHeatmap],
  template: `<aui-heatmap label="Tickets by weekday and hour" [columns]="columns" [rows]="rows" [values]="values"></aui-heatmap>`,
})
export class TicketsComponent {
  readonly columns = ['9', '12', '15'];
  readonly rows = ['Mon', 'Tue'];
  readonly values = [[1, 5, 9], [null, 4, 2]];
}

<aui-heatmap>

Class AuiHeatmap; template reference #ref="auiHeatmap".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby); also the data table caption.
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (matrix size, lowest and highest value with their cells).
valueFormat	NumberFormatOptions		Number format for cell labels, legend step ranges, tooltips, the data table, and the summary.
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere.
columns	readonly string[]		Required. Column labels (x axis), in order (mirrored in RTL).
rows	readonly string[]		Required. Row labels (y axis), top to bottom.
values	readonly (readonly (number | null)[])[]		Required. values[row][column]: exactly one array per row and one value per column. null, NaN, and infinities are empty cells (“No value”).
colorScale	HeatmapColorScale		{ type?: ‘sequential’ | ‘diverging’ (default sequential), color?: 1-8 (sequential slot, default 1), negative?: 1-8 (default 2), positive?: 1-8 (default 1), midpoint?: number (diverging center, default 0), min?, max? (fixed domain; default the nice-rounded data extent), steps?: 3-9 (per side for diverging, default 5) }. Values outside a fixed domain use the first or last step.
xAxis	{ label?: string; }		Column axis title (drawn below the plot).
yAxis	{ label?: string; }		Row axis title (drawn beside the row labels); also the header of the data table’s first column (default “Row”).
legend	ChartLegendMode	'auto'	Legend listing every color step with its value range; auto and show both show it, hide removes it. Entries are not toggle buttons.
dataTable	ChartTableMode	'toggle'	Data table fallback with the exact matrix: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus (cell name and value).
patterns	boolean	false	Shared chart option (toggles aui-chart–patterns); heatmap cells and step swatches are not textured, so it has no visible effect.
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container. Cells share the plot evenly.
cellLabels	HeatmapCellLabels	'auto'	Values printed inside cells: auto and always print them where the formatted value fits (always skips cells that are too small); none prints no values.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	rtl mirrors the columns (first column at the right), puts the row labels on the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Shared chart option; a heatmap has no series, so it has no effect.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Shared chart method; a heatmap has no series, so it only re-renders.