Charts

Column Chart

Columns or horizontal bars for comparing values across categories — stacked, 100% stacked or grouped side by side. Drawn as SVG by the component, 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).

Features18

API

Theming

Basic

Series are stacked by default. Hover a column: it stays bright, the others fade, and the tooltip shows every segment with the total. The arrow keys move through the columns too.

Tickets by weekday. Column chart, 3 series, 7 values, from 6 to 67
Category	Opened	In progress	Closed
Mon	44	13	11
Tue	55	23	17
Wed	41	20	15
Thu	67	8	15
Fri	22	13	21
Sat	13	9	8
Sun	18	6	12

Legend variants

legendVariant: dot (the default), line, pill or stat — the series totals in large type that switch to the hovered column's values.

Legend variants. Column chart, 2 series, 4 values, from 52 to 143
Category	Online	Retail
North	120	64
South	98	71
East	143	52
West	110	80

15 lines

<div class="wrap">  <tx-select    class="control"    ariaLabel="Legend variant"    [options]="variants"    [(ngModel)]="variant"  />  <tx-column-chart    [series]="series"    [categories]="regions"    [height]="320"    [legendVariant]="variant()"    ariaLabel="Legend variants"  /></div>

Grouped

[stacked]="false" puts the series side by side in each category.

Sales by region, this year and last year. Column chart, 2 series, 5 values, from 30 to 61
Category	2025	2026
North	48	55
South	36	39
East	52	61
West	41	38
Central	30	42

Percent

stackType="100%" stacks every category to 100%, so the shares compare across categories; the value axis turns into percents and the tooltip keeps the real values.

Ticket outcome by channel. Column chart, 3 series, 4 values, from 25 to 610
Category	Solved	Escalated	Open
Email	420	80	55
Chat	610	45	30
Phone	230	60	25
Forum	120	30	70

Horizontal

horizontal turns the columns into bars — better for long category names, which are cut at maxLabelWidth (220px) with the full name in a hint.

Views by page. Bar chart, 1 series, 6 values, from 1,500 to 5,400
Category	Views
Getting started	5,400
Installation	4,100
Theming and design tokens	2,900
Forms	2,600
Data table with filters and export	2,200
Icons	1,500

Data labels

dataLabels writes each value on its bar; a label that does not fit a stacked segment is left out, grouped bars put it above the bar.

Newsletter reach. Column chart, 2 series, 6 values, from 5.2K to 16.1K
Category	Sent	Opened
Jan	12.4K	5.2K
Feb	13.1K	5.9K
Mar	12.8K	5.6K
Apr	14.9K	6.8K
May	15.2K	7.1K
Jun	16.1K	7.6K

Negative

Negative values grow down from the zero line, which is drawn when the range crosses zero; stacks split into a positive and a negative part.

Cash flow by month. Column chart, 2 series, 8 values, from -60 to 66
Category	Income	Expenses
Jan	42	-35
Feb	38	-41
Mar	51	-38
Apr	47	-52
May	55	-44
Jun	61	-47
Jul	58	-60
Aug	66	-49

Axes

Axis titles, the category axis on top with xAxisPosition, grid lines, a fixed range with yMax, compact numbers on the value axis, and labelMode="rotate" for long category labels.

Revenue by product. Column chart, 1 series, 6 values, from 98K to 312K
Category	Revenue
Analytics suite	312K
Billing module	184K
Customer portal	251K
Data warehouse	296K
Email service	98K
File storage	143K

13 lines

<tx-column-chart    [series]="series"    [categories]="products"    xAxisTitle="Product"    yAxisTitle="Revenue"    [yMax]="400000"    valueFormat="compact"    grid="both"    xAxisPosition="top"    labelMode="rotate"    [height]="380"    ariaLabel="Revenue by product"  />

Annotations

annotations on a column chart: an x-band covers whole categories, a y-line marks a target across the plot.

Sales against the plan. Column chart, 1 series, 6 values, from 38 to 70
Category	Sales
Jan	42
Feb	51
Mar	38
Apr	64
May	70
Jun	58

Legend

A legend item hides or shows its series and the axis rescales; hovering an item fades the other series. legendPosition and legendAlign place it; seriesToggle reports changes.

Headcount by department. Column chart, 4 series, 4 values, from 8 to 58
Category	Engineering	Sales	Support	Marketing
Q1	42	18	12	8
Q2	45	21	12	9
Q3	51	24	14	9
Q4	58	25	17	11

Click a legend item.

11 lines

<div class="wrap">  <tx-column-chart    [series]="series"    [categories]="quarters"    legendPosition="bottom"    legendAlign="center"    ariaLabel="Headcount by department"    (seriesToggle)="onToggle($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Tooltip formatter

tooltipFormatter gets the value and its position (seriesIndex, dataPointIndex), so it can show related data — here the amount in the original currency.

Spending in euro. Column chart, 2 series, 4 values, from 95 to 310
Category	Hosting	Tools
Jan	270	120
Feb	280	95
Mar	310	140
Apr	305	150

Loading and empty

loading keeps the size with a skeleton; empty series (or only null values) show "No data".

No data

13 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="series.set([])"></button>  </div>  <tx-column-chart    [series]="series()"    [categories]="weeks"    [loading]="loading()"    [height]="260"    ariaLabel="Signups by week"  /></div>

Live

Changing series, stacked or horizontal redraws in place — bars slide to their new size.

Stacked

Horizontal

Units sold by store. Column chart, 2 series, 4 values, from 20 to 54
Category	Coffee	Pastry
Downtown	20	33
Airport	37	50
Harbor	54	22
Mall	26	39

15 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>    <tx-toggle-switch label="Stacked" [(ngModel)]="stacked" />    <tx-toggle-switch label="Horizontal" [(ngModel)]="horizontal" />  </div>  <tx-column-chart    [series]="series()"    [categories]="stores"    [stacked]="stacked()"    [horizontal]="horizontal()"    [height]="300"    ariaLabel="Units sold by store"  /></div>

Fill parent

height="100%" fills a parent with a definite height — a dashboard tile, a grid cell — and redraws on resize. Drag the corner of the box.

Deploys per day. Column chart, 2 series, 5 values, from 2 to 12
Category	Production	Staging
Mon	4	9
Tue	6	12
Wed	3	8
Thu	7	11
Fri	2	6

Accessibility

Tab to the chart: ←/→ move between categories, ↑/↓ between the series of a stack (in a horizontal chart the keys swap), Home / End jump to the ends, Escape closes the tooltip. Each bar is announced; screen readers also get a summary and a hidden data table.

Open issues by team. Column chart, 2 series, 4 values, from 4 to 20
Category	Bugs	Features
Core	12	20
Docs	4	8
Design	6	14
Infra	9	5

Design tokens

dt sets the bar radius, the bar width (share of the category), the gap between grouped bars, the gap between stacked segments and the palette of one chart.

Plan and fact. Column chart, 2 series, 5 values, from 28 to 41
Category	Plan	Fact
Jan	30	28
Feb	32	35
Mar	34	31
Apr	36	39
May	38	41

10 lines

<tx-column-chart    [series]="series"    [categories]="months"    [stacked]="false"    [dt]="{      bar: { radius: '2px', width: '72%', groupGap: '6px' },      series: { color1: 'var(--tx-green-500)', color2: 'var(--tx-amber-400)' },    }"    ariaLabel="Plan and fact"  />

Pass through

pt reaches the parts — bar, dataLabel, grid, axis, legend, legendItem, plot, tooltip and more.

Orders by day. Column chart, 2 series, 7 values, from 9 to 52
Category	Pickup	Delivery
Mon	12	30
Tue	14	28
Wed	9	35
Thu	16	33
Fri	21	41
Sat	25	52
Sun	18	47

8 lines

<tx-column-chart    [series]="series"    [categories]="days"    [pt]="{      bar: { style: { stroke: 'var(--tx-surface-card)', 'stroke-width': '2' } },    }"    ariaLabel="Orders by day"  />

Unstyled

unstyled removes the tectra styles: no tokens, no rounding, no motion — the geometry, the colours of the series, the tooltip and the keyboard stay, ready for your own CSS.

Category	Income	Expenses
Jan	42	-35
Feb	38	-41
Mar	51	-38
Apr	47	-52
May	55	-44
Jun	61	-47
Jul	58	-60
Aug	66	-49

Category	Income	Expenses
Jan	42	-35
Feb	38	-41
Mar	51	-38
Apr	47	-52
May	55	-44
Jun	61	-47
Jul	58	-60
Aug	66	-49

Category	Income	Expenses
Jan	42	-35
Feb	38	-41
Mar	51	-38
Apr	47	-52
May	55	-44
Jun	61	-47
Jul	58	-60
Aug	66	-49