Treemap for Angular

import { AuiTreemap } from '@absoluteui/angular/treemap';

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

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

Example

import { Component } from '@angular/core';
import { AuiTreemap } from '@absoluteui/angular/treemap';
import type { TreemapNode } from '@absoluteui/components/treemap';

@Component({
  selector: 'app-budget',
  imports: [AuiTreemap],
  template: `<aui-treemap label="Budget" [data]="data"></aui-treemap>`,
})
export class BudgetComponent {
  readonly data: TreemapNode[] = [
    { id: 'eng', label: 'Engineering', children: [{ id: 'web', label: 'Web', value: 30 }, { id: 'api', label: 'API', value: 20 }] },
    { id: 'ops', label: 'Operations', value: 25 },
  ];
}

<aui-treemap>

Class AuiTreemap; template reference #ref="auiTreemap".

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 (shown path, item count, total, three largest items).
valueFormat	NumberFormatOptions		Number format for values in tile labels, tooltips, the data table, and the summary (percentages use a percent format).
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere.
data	readonly TreemapNode[]		Required. Top-level nodes: { id (unique across the tree), label, value?: number | null, children?: TreemapNode[], color?: 1-8 }. Groups default to the sum of their children (a positive own value takes precedence). Zero, negative, and missing values are not plotted. At most 32 levels of nesting.
root	string | null	null	Id of the group to show (drill-down state); null shows the top level. An unknown id or a leaf falls back to the top level. Setting it through update() emits no event.
drillDown	boolean	true	Allow opening groups by click and Enter/Space and going up with Backspace and the breadcrumb. false: groups are plain tiles and no breadcrumb is shown (drillTo() still works).
rootLabel	string	'All'	Name of the top level in the breadcrumb and the “Showing …” text (default: localized “All”).
legend	ChartLegendMode	'auto'	Shared chart option; a treemap labels its tiles directly and never shows a legend, so it has no effect.
dataTable	ChartTableMode	'toggle'	Data table of the whole hierarchy (name path, value, share of parent): 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 (label, value, share).
patterns	boolean	false	Texture fills on tiles (by position in the shown level) so neighbors never differ by color alone (always on in forced colors).
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container.
tileLabels	boolean	true	Print the label (groups that open end with “>”) and the value inside tiles that are large enough.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	rtl mirrors the layout (largest tile at the top right), right-aligns tile labels, and swaps ArrowLeft/ArrowRight.

Two-way bindings

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

Outputs

Output	Payload	Description
(drilled)	TreemapDrillDetail	The shown group changed through a tile (click, Enter/Space), Backspace, the breadcrumb, or drillTo(). id: the shown group (null: top level); path: ids from the top level. Not emitted for update({ root }). Re-emits aui-drill.

Read-only state

Property	Type	Description
path	Signal<string[]>	Ids from the top level to the shown group (empty at the top level).

Methods

Call them through a viewChild query or a template reference.

Method	Description
drillTo(id: string | null): void	Show the group id (null: top level). Ignored for leaves, unknown ids, and the current group. Emits aui-drill and announces “Showing {path}” politely; when focus was in the chart it moves to the largest tile (going down) or the group you came from (going up).
setSeriesVisible(id: string, visible: boolean): void	Shared chart method; a treemap has no series, so it only re-renders.