Charts

Treemap

Shares of a total as rectangles sized by value, with names and values inside the tiles that fit and nested groups. Drawn as SVG, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features8

API

Theming

Basic

Pass items with a label and a value. Bigger values get bigger tiles; names and values are drawn inside the tiles that have room. Hover a tile or use the arrow keys for the tooltip with its share.

Spend by category. Treemap, 1 series, 8 values, total 55,300
Category	Value	Share
Hosting	18,400	33.3%
Advertising	12,600	22.8%
Salaries	9,800	17.7%
Software	6,200	11.2%
Office	3,900	7.1%
Travel	2,400	4.3%
Training	1,300	2.4%
Other	700	1.3%

Nested

An item with children becomes a labelled group whose tiles share its colour; its value is the sum of the children. tileClick tells which tile and group were clicked.

Visitors by region and country. Treemap, 1 series, 9 values, total 22,500
Category	Value	Share
Europe / Germany	4,200	18.7%
Europe / France	3,100	13.8%
Europe / Poland	1,900	8.4%
Europe / Spain	1,500	6.7%
Americas / United States	5,200	23.1%
Americas / Canada	1,400	6.2%
Americas / Brazil	1,100	4.9%
Asia / Japan	2,300	10.2%
Asia / India	1,800	8%

Click a country.

15 lines

<div class="wrap">  <tx-treemap    [items]="regions"    [height]="380"    ariaLabel="Visitors by region and country"    (tileClick)="clicked.set($event)"  />  <tx-message severity="secondary" size="small">    @if (clicked(); as tile) {      {{ tile.group }} / {{ tile.label }}: {{ tile.value }} visitors    } @else {      Click a country.    }  </tx-message></div>

Labels

showDataLabels and showValues switch the text inside the tiles; small tiles never get text that would not fit, the tooltip still names them.

Names

Values

Disk usage by folder. Treemap, 1 series, 9 values, total 98.2K
Category	Value	Share
videos	48.2K	49.1%
photos	21.5K	21.9%
backups	15.8K	16.1%
documents	6.4K	6.5%
music	3.9K	4%
downloads	1.8K	1.8%
fonts	420	0.4%
notes	160	0.2%
keys	40	0%

14 lines

<div class="wrap">  <div class="controls">    <tx-toggle-switch label="Names" [(ngModel)]="names" />    <tx-toggle-switch label="Values" [(ngModel)]="values" />  </div>  <tx-treemap    [items]="files"    [height]="300"    [showDataLabels]="names()"    [showValues]="values()"    valueFormat="compact"    ariaLabel="Disk usage by folder"  /></div>

Tile template

<ng-template txTreemapTile let-tile> draws your own content in every tile: the context has label, value (formatted), share, color, width and height, so you can choose what fits. The content is clipped to the tile.

Sales by store. Treemap, 1 series, 6 values, total 5,250
Category	Value	Share
Berlin Mitte	1,840	35%
Munich Central	1,320	25.1%
Hamburg Port	960	18.3%
Cologne Old Town	610	11.6%
Leipzig	380	7.2%
Bremen	140	2.7%

11 lines

<tx-treemap [items]="stores" [height]="320" ariaLabel="Sales by store">  <ng-template txTreemapTile let-tile let-value="value" let-share="share">    @if (tile.height > 56 && tile.width > 72) {      <span class="share">{{ share }}</span>      <span class="name">{{ tile.label }}</span>      <span class="value">{{ value }} orders</span>    } @else if (tile.width > 36 && tile.height > 24) {      <span class="name">{{ share }}</span>    }  </ng-template></tx-treemap>

Value format

valueFormat formats the values in the tiles and the tooltip; tooltipFormatter changes only the tooltip.

Revenue by plan. Treemap, 1 series, 4 values, total $1234K
Category	Value	Share
Team	$482K	39.1%
Pro	$370K	30%
Enterprise	$288K	23.3%
Starter	$94K	7.6%

Loading and empty

loading shows a skeleton of the same size; items with no positive value show "No data".

No data

12 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="items.set([])"></button>  </div>  <tx-treemap    [items]="items()"    [loading]="loading()"    [height]="260"    ariaLabel="Tickets by team"  /></div>

Design tokens

dt sets the tokens of one treemap — the treemap group of the chart tokens (radius, gap, label type) and the series colours.

Code by language. Treemap, 1 series, 4 values, total 100
Category	Value	Share
TypeScript	62	62%
SCSS	18	18%
HTML	14	14%
JSON	6	6%

14 lines

<tx-treemap  [items]="languages"  [height]="280"  [dt]="{    treemap: { radius: '12px', gap: '4px', labelFontSize: '14px' },    series: {      color1: 'var(--tx-primary-700)',      color2: 'var(--tx-primary-500)',      color3: 'var(--tx-primary-400)',      color4: 'var(--tx-primary-300)',    },  }"  ariaLabel="Code by language"/>

Pass through

pt adds classes and styles to the parts: root, plot, svg, tile, tileContent, tileLabel, tileValue, group, groupLabel, tooltip, empty, skeleton.

Category	Value	Share
Desktop	5,820	55.1%
Mobile	4,130	39.1%
Tablet	610	5.8%