Charts

Range Area Chart

A band from a low to a high value with an optional line inside — temperature from min to max with the average, a forecast with its confidence range. 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).

Features10

API

Theming

Basic

The band runs from low to high, the line runs inside it. Hover a month: the tooltip shows the line value with the range beside it.

Temperature by month. Range area chart, 1 series, 12 values, from -6 to 27
Category	Low	Temperature	High
Jan	-6	-3	0
Feb	-5	-2	1
Mar	-1	3	7
Apr	5	10	15
May	11	16	22
Jun	15	20	25
Jul	17	22	27
Aug	16	21	26
Sep	11	15	20
Oct	6	9	13
Nov	1	3	5
Dec	-3	-1	1

Forecast

Dates with xType="time". The forecast band widens with time while null keeps the past empty; an actual series with equal low and high draws a plain line.

Orders and the forecast with its range. Range area chart, 2 series, 16 values, from 3.4K to 5.6K
Category	Forecast, Low	Forecast	Forecast, High	Actual, Low	Actual	Actual, High
Sep 7, 2026	—	—	—	3.4K	3.4K	3.4K
Sep 14, 2026	—	—	—	3.6K	3.6K	3.6K
Sep 21, 2026	—	—	—	3.5K	3.5K	3.5K
Sep 28, 2026	—	—	—	3.7K	3.7K	3.7K
Oct 5, 2026	—	—	—	3.8K	3.8K	3.8K
Oct 12, 2026	—	—	—	3.9K	3.9K	3.9K
Oct 19, 2026	—	—	—	4.1K	4.1K	4.1K
Oct 26, 2026	—	4.3K	—	4.3K	4.3K	4.3K
Nov 2, 2026	4.1K	4.3K	4.5K	—	—	—
Nov 9, 2026	4K	4.3K	4.7K	—	—	—
Nov 16, 2026	4K	4.4K	4.8K	—	—	—
Nov 23, 2026	3.9K	4.4K	5K	—	—	—
Nov 30, 2026	3.9K	4.5K	5.1K	—	—	—
Dec 7, 2026	3.8K	4.5K	5.3K	—	—	—
Dec 14, 2026	3.7K	4.6K	5.4K	—	—	—
Dec 21, 2026	3.7K	4.6K	5.6K	—	—	—

Several

Several bands overlap softly; the legend hides one, hovering an item fades the others. curve="straight" and edges change the look.

Latency range by region. Range area chart, 2 series, 8 values, from 38 to 160
Category	Europe, Low	Europe	Europe, High	Asia, Low	Asia	Asia, High
00	40	55	80	70	100	150
03	38	52	76	74	108	160
06	42	58	85	66	92	130
09	60	85	130	52	70	95
12	72	101	160	48	66	90
15	70	98	150	50	68	92
18	64	90	140	58	80	110
21	50	70	100	64	92	135

Events

pointClick reports the clicked category with the low, the high and the line value of the series under the pointer.

Click a part. Range area chart, 1 series, 5 values, from 120 to 360
Category	Low	Visitors	High
Mon	120	180	260
Tue	140	210	300
Wed	130	200	280
Thu	150	230	320
Fri	170	260	360

Click the chart.

10 lines

<div class="wrap">  <tx-range-area-chart    [series]="data"    [categories]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"    [height]="280"    ariaLabel="Click a part"    (pointClick)="onClick($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty series 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)="live.set([])"></button>  </div>  <tx-range-area-chart    [series]="live()"    [categories]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"    [loading]="loading()"    [height]="260"    ariaLabel="Loaded data"  /></div>

Live

New series redraw in place — the band and the line morph to their new shape.

Shuffled data. Range area chart, 1 series, 5 values, from 30 to 71
Category	Low	Load	High
Mon	32	40	50
Tue	46	57	71
Wed	30	44	62
Thu	53	61	71
Fri	37	48	62

11 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-range-area-chart    [series]="live()"    [categories]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"    [height]="300"    ariaLabel="Shuffled data"  /></div>

Accessibility

Tab to the chart: ←/→ walk the categories, ↑/↓ the series, and each value is announced with its range. Screen readers also get a summary and a hidden table.

Heart rate during the week. Range area chart, 1 series, 7 values, from 50 to 165
Category	Low	Heart rate	High
Mon	52	68	142
Tue	55	70	128
Wed	50	66	151
Thu	54	69	133
Fri	53	71	120
Sat	58	75	165
Sun	56	64	110

Design tokens

dt sets the band opacity, the edge and line widths and the palette of one chart.

Custom band. Range area chart, 1 series, 5 values, from 10 to 19
Category	Low	Price	High
Mon	10	12	14
Tue	12	14	16
Wed	11	13	15
Thu	13	15	18
Fri	15	17	19

9 lines

<tx-range-area-chart    [series]="series"    [categories]="days"    [dt]="{      rangeArea: { fillOpacity: '0.35', edgeWidth: '0', lineWidth: '3' },      series: { color1: 'var(--tx-orange-400)' },    }"    ariaLabel="Custom band"  />

Pass through

pt reaches the parts — band, edge, line, marker, crosshair, grid, axis, legend, plot, tooltip and more.

Dashed edges. Range area chart, 1 series, 5 values, from 20 to 60
Category	Low	Load	High
Mon	20	32	45
Tue	25	38	52
Wed	22	35	48
Thu	30	44	60
Fri	28	41	55

Unstyled

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

Category	Low	Temperature	High
Jan	-6	-3	0
Feb	-5	-2	1
Mar	-1	3	7
Apr	5	10	15
May	11	16	22
Jun	15	20	25
Jul	17	22	27
Aug	16	21	26
Sep	11	15	20
Oct	6	9	13
Nov	1	3	5
Dec	-3	-1	1

Category	Europe, Low	Europe	Europe, High	Asia, Low	Asia	Asia, High
00	40	55	80	70	100	150
03	38	52	76	74	108	160
06	42	58	85	66	92	130
09	60	85	130	52	70	95
12	72	101	160	48	66	90
15	70	98	150	50	68	92
18	64	90	140	58	80	110
21	50	70	100	64	92	135

Category	Low	Visitors	High
Mon	120	180	260
Tue	140	210	300
Wed	130	200	280
Thu	150	230	320
Fri	170	260	360

Category	Low	Heart rate	High
Mon	52	68	142
Tue	55	70	128
Wed	50	66	151
Thu	54	69	133
Fri	53	71	120
Sat	58	75	165
Sun	56	64	110

Category	Low	Temperature	High
Jan	-6	-3	0
Feb	-5	-2	1
Mar	-1	3	7
Apr	5	10	15
May	11	16	22
Jun	15	20	25
Jul	17	22	27
Aug	16	21	26
Sep	11	15	20
Oct	6	9	13
Nov	1	3	5
Dec	-3	-1	1

Category	Europe, Low	Europe	Europe, High	Asia, Low	Asia	Asia, High
00	40	55	80	70	100	150
03	38	52	76	74	108	160
06	42	58	85	66	92	130
09	60	85	130	52	70	95
12	72	101	160	48	66	90
15	70	98	150	50	68	92
18	64	90	140	58	80	110
21	50	70	100	64	92	135

Category	Low	Visitors	High
Mon	120	180	260
Tue	140	210	300
Wed	130	200	280
Thu	150	230	320
Fri	170	260	360

Category	Low	Heart rate	High
Mon	52	68	142
Tue	55	70	128
Wed	50	66	151
Thu	54	69	133
Fri	53	71	120
Sat	58	75	165
Sun	56	64	110

Category	Low	Temperature	High
Jan	-6	-3	0
Feb	-5	-2	1
Mar	-1	3	7
Apr	5	10	15
May	11	16	22
Jun	15	20	25
Jul	17	22	27
Aug	16	21	26
Sep	11	15	20
Oct	6	9	13
Nov	1	3	5
Dec	-3	-1	1

Category	Europe, Low	Europe	Europe, High	Asia, Low	Asia	Asia, High
00	40	55	80	70	100	150
03	38	52	76	74	108	160
06	42	58	85	66	92	130
09	60	85	130	52	70	95
12	72	101	160	48	66	90
15	70	98	150	50	68	92
18	64	90	140	58	80	110
21	50	70	100	64	92	135

Category	Low	Visitors	High
Mon	120	180	260
Tue	140	210	300
Wed	130	200	280
Thu	150	230	320
Fri	170	260	360

Category	Low	Heart rate	High
Mon	52	68	142
Tue	55	70	128
Wed	50	66	151
Thu	54	69	133
Fri	53	71	120
Sat	58	75	165
Sun	56	64	110