Charts

Combo Chart

Columns and lines in one plot, each series on the main or a second value axis — amounts in columns with a rate or a trend line over them. 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).

Features14

API

Theming

Basic

Every series is a column by default; type: 'line' draws it as a line over the columns. Hover a month: its columns stay bright, the line value gets a marker and the tooltip lists every series.

Orders and average order value. Combo chart, 3 series, 6 values
Category	Orders	Returns	Visitors, hundreds
Jan	320	24	210
Feb	410	31	260
Mar	380	22	250
Apr	470	35	300
May	520	28	330
Jun	610	30	390

Second axis

axis: 'secondary' puts a series on a second value axis on the other side, with its own format (y2ValueFormat) and title (y2AxisTitle). Its ticks stand on the grid lines of the main axis, so the plot keeps one grid.

Revenue and margin by quarter. Combo chart, 2 series, 6 values
Category	Revenue	Margin
Q1 2025	1.2M	18.2%
Q2 2025	1.4M	21.5%
Q3 2025	1.3M	19.8%
Q4 2025	1.6M	24.1%
Q1 2026	1.7M	25.3%
Q2 2026	1.9M	27.9%

9 lines

<tx-combo-chart    [series]="series"    [categories]="quarters"    valueFormat="compact"    y2ValueFormat="percent"    yAxisTitle="Revenue"    y2AxisTitle="Margin"    ariaLabel="Revenue and margin by quarter"  />

Area

type: 'area' fills the space under a line with a soft gradient. curve sets the line shape (smooth, straight, step) and markers turns the value points off. Here the sign-ups stand on the second axis, so the small numbers stay readable under the large ones.

Sessions and sign-ups by day. Combo chart, 2 series, 14 values
Category	Sessions	Sign-ups
Nov 1	820	42
Nov 2	940	51
Nov 3	910	47
Nov 4	1,020	58
Nov 5	1,180	66
Nov 6	760	31
Nov 7	690	28
Nov 8	870	44
Nov 9	990	53
Nov 10	1,050	57
Nov 11	1,110	61
Nov 12	1,240	72
Nov 13	820	39
Nov 14	740	33

Stacked

stacked stacks the column series of each axis into one column per category; lines stay on top as they are. The tooltip lists every part of the stack.

Tickets by channel and the target. Combo chart, 4 series, 6 values
Category	Email	Chat	Phone	Target
Jan	120	220	150	480
Feb	132	182	232	500
Mar	101	191	201	520
Apr	134	234	154	540
May	90	290	190	560
Jun	110	330	210	580

Axes

Axis titles, yAxisPosition="right" (the second axis moves to the left), a fixed range of the second axis with y2Min / y2Max — the axis then keeps its own ticks.

Rainfall and temperature by city. Combo chart, 2 series, 7 values
Category	Rainfall	Temperature
Lisbon	82	17.2
Oslo	64	6.3
Vienna	51	11.4
Warsaw	38	8.5
Madrid	33	15
Dublin	71	9.8
Athens	47	19.1

12 lines

<tx-combo-chart    [series]="series"    [categories]="cities"    xAxisTitle="City"    yAxisTitle="Rainfall, mm"    y2AxisTitle="Temperature, °C"    yAxisPosition="right"    [y2Min]="-10"    [y2Max]="30"    [height]="380"    ariaLabel="Rainfall and temperature by city"  />

Annotations

axis: 'secondary' puts a line, a band or a point on the second value axis — here the margin target.

Revenue and margin with targets. Combo chart, 2 series, 4 values
Category	Revenue	Margin
Q1	120	18%
Q2	150	22%
Q3	140	19%
Q4	190	26%

Tooltip

tooltipMode="single" shows only the series under the pointer — the column you hover or the nearest line. tooltipFormatter writes the values; without it every series uses the format of its axis.

Trials and conversion by week. Combo chart, 2 series, 6 values
Category	Trials	Conversion
W1	180	11.2%
W2	210	12.8%
W3	195	12.1%
W4	240	14.5%
W5	260	15.2%
W6	255	16%

8 lines

<tx-combo-chart    [series]="series"    [categories]="weeks"    tooltipMode="single"    [tooltipFormatter]="format"    y2ValueFormat="percent"    ariaLabel="Trials and conversion by week"  />

Events

pointClick reports the clicked category with the column under the pointer or the nearest line; seriesToggle reports legend changes. Hiding the only series of the second axis removes that axis.

Deliveries and on-time rate. Combo chart, 2 series, 6 values
Category	Deliveries	On time
Jan	1,200	91%
Feb	1,340	93%
Mar	1,280	89%
Apr	1,460	95%
May	1,530	96%
Jun	1,610	94%

Click a month or a legend item.

12 lines

<div class="wrap">  <tx-combo-chart    [series]="series"    [categories]="months"    [height]="280"    ariaLabel="Deliveries and on-time rate"    y2ValueFormat="percent"    (pointClick)="onPoint($event)"    (seriesToggle)="onToggle($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

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-combo-chart    [series]="series()"    [categories]="weeks"    [loading]="loading()"    [height]="260"    ariaLabel="Builds and failure rate by week"  /></div>

Live

Changing series or stacked redraws in place — columns slide to their new size and the line moves with them.

Stacked

Area

Units sold and average basket by store. Combo chart, 3 series, 5 values
Category	Coffee	Pastry	Basket
Downtown	20	23	13
Airport	37	10	12
Harbor	54	27	11
Mall	26	14	10
Station	43	31	9

14 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="Area" [(ngModel)]="area" />  </div>  <tx-combo-chart    [series]="series()"    [categories]="stores"    [stacked]="stacked()"    [height]="300"    ariaLabel="Units sold and average basket by store"  /></div>

Accessibility

Tab to the chart: ←/→ move between categories, ↑/↓ between the series, Home / End jump to the ends, Escape closes the tooltip. Each value is announced in the format of its axis; screen readers also get a summary and a hidden data table.

Open issues and resolution rate by team. Combo chart, 2 series, 4 values
Category	Open issues	Resolved
Core	32	78%
Docs	12	91%
Design	20	84%
Infra	14	88%

Design tokens

dt sets the bar radius, width and gap, the line width, the markers and the palette of one chart.

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

10 lines

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

Pass through

pt reaches the parts — bar, line, area, marker, series, grid, axis, legend, legendItem, plot, tooltip and more.

Orders by day and the forecast. Combo chart, 2 series, 7 values
Category	Orders	Forecast
Mon	42	40
Tue	44	42
Wed	39	43
Thu	46	45
Fri	51	50
Sat	65	60
Sun	58	61

8 lines

<tx-combo-chart    [series]="series"    [categories]="days"    [pt]="{      line: { style: { 'stroke-dasharray': '6 4' } },    }"    ariaLabel="Orders by day and the forecast"  />

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	Orders	Returns	Visitors, hundreds
Jan	320	24	210
Feb	410	31	260
Mar	380	22	250
Apr	470	35	300
May	520	28	330
Jun	610	30	390

Category	Email	Chat	Phone	Target
Jan	120	220	150	480
Feb	132	182	232	500
Mar	101	191	201	520
Apr	134	234	154	540
May	90	290	190	560
Jun	110	330	210	580

Category	Orders	Returns	Visitors, hundreds
Jan	320	24	210
Feb	410	31	260
Mar	380	22	250
Apr	470	35	300
May	520	28	330
Jun	610	30	390

Category	Email	Chat	Phone	Target
Jan	120	220	150	480
Feb	132	182	232	500
Mar	101	191	201	520
Apr	134	234	154	540
May	90	290	190	560
Jun	110	330	210	580

Category	Orders	Returns	Visitors, hundreds
Jan	320	24	210
Feb	410	31	260
Mar	380	22	250
Apr	470	35	300
May	520	28	330
Jun	610	30	390

Category	Email	Chat	Phone	Target
Jan	120	220	150	480
Feb	132	182	232	500
Mar	101	191	201	520
Apr	134	234	154	540
May	90	290	190	560
Jun	110	330	210	580