Charts

Bar List

A top-N ranking: a label over a bar scaled to the biggest value, the formatted value and its share of the total. Sorted from the biggest value, 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).

Features7

API

Theming

Basic

Pass items with a label and a value in any order. The list sorts them, scales each bar to the biggest value and shows the percent of the total; zero values are left out.

Germany4,28033.2%
France3,12024.2%
Spain2,31017.9%
Poland1,94015%
Italy1,2609.8%

Links

A row with link (and optional queryParams) becomes a router link: it gets a hover background and a focus ring, and Tab moves between the linked rows.

Limit

limit keeps only the biggest rows (10 by default). The percent is still the share of the whole total, so the visible rows may add up to less than 100%.

Chrome5,21051.1%
Safari2,38023.3%
Firefox9409.2%

4 lines

<div class="wrap">  <tx-select class="control" ariaLabel="Rows to show" [options]="limits" [(ngModel)]="limit" />  <tx-bar-list [items]="browsers" [limit]="limit()" ariaLabel="Visits by browser" /></div>

Value format

valueFormat formats the values: number (default), integer, compact (12.4K), percent or your own function. Numbers follow the tectra locale.

Organic128.4K54.1%
Paid64.3K27.1%
Social31.8K13.4%
Email12.9K5.4%

Team$48,20051%
Pro$36,95039.1%
Starter$9,4009.9%

4 lines

<div class="grid">  <tx-bar-list [items]="sessions" valueFormat="compact" ariaLabel="Sessions by channel" />  <tx-bar-list [items]="revenue" [valueFormat]="money" ariaLabel="Revenue by plan" /></div>

Loading and empty

loading shows skeleton rows; a list with no positive values says "No data" in the tectra locale.

No data

7 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-bar-list [items]="items()" [loading]="loading()" ariaLabel="Signups by source" /></div>

Design tokens

dt sets the tokens of one list — the barList group of the chart tokens: row height, gaps, bar colour and radius, text colours.

English6,40057%
Spanish2,10018.7%
German1,75015.6%
Japanese9808.7%

12 lines

<tx-bar-list  [items]="languages"  [dt]="{    barList: {      rowHeight: '34px',      barBackground: 'color-mix(in srgb, var(--tx-green-500) 24%, transparent)',      barRadius: '999px',      valueFontWeight: '700',    },  }"  ariaLabel="Readers by language"/>

Pass through

pt adds classes and styles to the parts: root, list, item, row, track, bar, label, value, percent, empty, skeleton.

Desktop5,82055.1%
Mobile4,13039.1%
Tablet6105.8%