ComponentsCharts

Line Chart

A smooth area or line chart for trends over time. It is drawn as SVG by the component itself — no chart library — renders on the server, and takes every colour from the design tokens, so themes and dark mode just work.

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

Features25APIThemingAccessibility

Basic

Pass series ({ name, data }) and categories. Hover the chart — a rule marks the nearest value and the tooltip sits above it — or focus it and use the arrow keys; click a legend item to hide a series.

Arrow keys move between values
Visits and sign-ups by month. Area chart, 2 series, 12 values, from 820 to 8,800
CategoryVisitsSign-ups
Jan4,200820
Feb4,800900
Mar5,1001,150
Apr4,700980
May5,9001,320
Jun6,4001,480
Jul7,1001,610
Aug6,8001,540
Sep7,6001,720
Oct8,2001,900
Nov7,9001,810
Dec8,8002,050

Legend variants

legendVariant picks the look of the legend: line (the default of a line chart — a short stroke in the series colour), dot, pill (tinted chips, the easiest to hit on touch) or stat — a card per series with the value under the pointer, or the last one, in large type. A hidden series keeps a hollow or dashed marker.

Arrow keys move between values
Legend variants. Area chart, 3 series, 8 values, from 9 to 72
CategoryRevenueCostsProfit
Jan423111
Feb473314
Mar45369
Apr533518
May583919
Jun614021
Jul664224
Aug724428

Line only

[area]="false" draws plain lines; markers puts a dot on every value (dots are left out when the points are too dense to tell apart).

Arrow keys move between values
Response time by day. Line chart, 2 series, 7 values, from 158 to 470
Categoryp50, msp95, ms
Mon182412
Tue176398
Wed190455
Thu201470
Fri188430
Sat160360
Sun158352

Curves

curve sets how the points are joined: smooth (monotone — it never overshoots the data), straight or step.

Arrow keys move between values
Active users by hour. Area chart, 1 series, 8 values, from 64 to 610
CategoryActive users
00:00120
03:0064
06:0090
09:00410
12:00520
15:00480
18:00610
21:00330

Stacked

stacked piles the areas on top of each other; stackType="100%" shows each series as a share of the total at every point.

Arrow keys move between values
Revenue by plan. Area chart, 3 series, 6 values, from 8 to 44
CategoryStarterTeamEnterprise
Q1 202512208
Q2 202514249
Q3 2025152913
Q4 2025153318
Q1 2026173822
Q2 2026184430

Time axis

With xType="time" the x values are dates (ISO strings, Date or timestamps) and the spacing follows the calendar: a missing week leaves a real gap. Ticks pick days, months or years by the range and are formatted in the kit's locale.

Arrow keys move between values
Orders on sale days. Area chart, 1 series, 10 values, from 140 to 260
CategoryOrders
Mar 2, 2026140
Mar 3, 2026152
Mar 5, 2026171
Mar 9, 2026168
Mar 10, 2026190
Mar 24, 2026260
Mar 25, 2026244
Mar 27, 2026231
Apr 6, 2026205
Apr 8, 2026222

Gaps

A null value leaves a gap in the line and the area instead of dropping to zero — for days without a measurement.

Arrow keys move between values
Temperature with sensor outages. Area chart, 1 series, 14 values, from 21 to 24
CategoryServer room, °C
121
222
322
4—
5—
623
724
824
922
10—
1121
1222
1322
1423

Scales and formats

valueFormat formats the value axis and the tooltip through the kit's locale: number, integer, compact (1.2K, 3.4M), percent or your own function. yScale="log" spreads values that differ by orders of magnitude.

Arrow keys move between values
Downloads per year. Line chart, 2 series, 8 values, from 300 to 9.1M
CategoryLibraryPlugins
20191.2K300
20205.4K900
202131K4.2K
2022160K18K
2023720K64K
20242.1M230K
20254.8M610K
20269.1M1.5M

Axes

xAxisTitle and yAxisTitle name the axes, yAxisPosition and xAxisPosition move the axes to the right or the top, grid draws value, category, both or none grid lines, yMin / yMax fix the value range. Labels that do not fit are skipped or turned (labelMode).

Arrow keys move between values
Delivery time by city. Line chart, 1 series, 8 values, from 26 to 48
CategoryDelivery time
Amsterdam26
Barcelona38
Copenhagen31
Dublin44
Edinburgh40
Florence35
Geneva29
Helsinki48

Annotations

annotations mark events on the plot: x-line and x-band for moments and periods, y-line and y-band for targets and ranges, point for a single value — each with a label pill and a tone or color. Bands sit behind the series, lines and points on top.

Arrow keys move between values
Weekly sign-ups with events. Line chart, 1 series, 12 values, from 320 to 700
CategorySign-ups
W1320
W2340
W3330
W4410
W5520
W6480
W7470
W8460
W9610
W10640
W11590
W12700

Zoom

zoom lets you look closer along the x axis: Ctrl (⌘) and the wheel or a pinch zoom at the pointer, a drag or a sideways swipe moves, a double click or "Reset zoom" resets; on the keyboard + / − zoom, Shift + arrows move and 0 resets. xRange is two-way.

Arrow keys move between values. Ctrl and the wheel or a pinch zoom, drag to move, + and − zoom, 0 resets
Daily visits. Area chart, 1 series, 120 values, from 995 to 2,156
CategoryVisits
Jul 1, 20261,290
Jul 2, 20261,339
Jul 3, 20261,371
Jul 4, 20261,389
Jul 5, 20261,395
Jul 6, 20261,398
Jul 7, 20261,401
Jul 8, 20261,409
Jul 9, 20261,423
Jul 10, 20261,443
Jul 11, 20261,464
Jul 12, 20261,483
Jul 13, 20261,491
Jul 14, 20261,485
Jul 15, 20261,459
Jul 16, 20261,414
Jul 17, 20261,351
Jul 18, 20261,276
Jul 19, 20261,195
Jul 20, 20261,119
Jul 21, 20261,056
Jul 22, 20261,013
Jul 23, 2026995
Jul 24, 20261,004
Jul 25, 20261,037
Jul 26, 20261,089
Jul 27, 20261,154
Jul 28, 20261,222
Jul 29, 20261,287
Jul 30, 20261,343
Jul 31, 20261,387
Aug 1, 20261,419
Aug 2, 20261,442
Aug 3, 20261,460
Aug 4, 20261,478
Aug 5, 20261,501
Aug 6, 20261,532
Aug 7, 20261,572
Aug 8, 20261,618
Aug 9, 20261,665
Aug 10, 20261,707
Aug 11, 20261,737
Aug 12, 20261,749
Aug 13, 20261,738
Aug 14, 20261,703
Aug 15, 20261,645
Aug 16, 20261,571
Aug 17, 20261,487
Aug 18, 20261,404
Aug 19, 20261,329
Aug 20, 20261,271
Aug 21, 20261,236
Aug 22, 20261,223
Aug 23, 20261,233
Aug 24, 20261,261
Aug 25, 20261,301
Aug 26, 20261,345
Aug 27, 20261,388
Aug 28, 20261,424
Aug 29, 20261,452
Aug 30, 20261,473
Aug 31, 20261,489
Sep 1, 20261,506
Sep 2, 20261,530
Sep 3, 20261,563
Sep 4, 20261,609
Sep 5, 20261,668
Sep 6, 20261,736
Sep 7, 20261,807
Sep 8, 20261,873
Sep 9, 20261,928
Sep 10, 20261,962
Sep 11, 20261,973
Sep 12, 20261,956
Sep 13, 20261,914
Sep 14, 20261,852
Sep 15, 20261,777
Sep 16, 20261,698
Sep 17, 20261,624
Sep 18, 20261,562
Sep 19, 20261,517
Sep 20, 20261,492
Sep 21, 20261,485
Sep 22, 20261,492
Sep 23, 20261,508
Sep 24, 20261,526
Sep 25, 20261,543
Sep 26, 20261,553
Sep 27, 20261,557
Sep 28, 20261,557
Sep 29, 20261,557
Sep 30, 20261,563
Oct 1, 20261,579
Oct 2, 20261,611
Oct 3, 20261,661
Oct 4, 20261,728
Oct 5, 20261,809
Oct 6, 20261,897
Oct 7, 20261,983
Oct 8, 20262,059
Oct 9, 20262,116
Oct 10, 20262,149
Oct 11, 20262,156
Oct 12, 20262,136
Oct 13, 20262,095
Oct 14, 20262,039
Oct 15, 20261,975
Oct 16, 20261,913
Oct 17, 20261,858
Oct 18, 20261,817
Oct 19, 20261,789
Oct 20, 20261,774
Oct 21, 20261,769
Oct 22, 20261,767
Oct 23, 20261,765
Oct 24, 20261,757
Oct 25, 20261,742
Oct 26, 20261,719
Oct 27, 20261,694
Oct 28, 20261,670

Whole range

Brush

brush draws the whole series under the chart with the visible window: drag the window to move it, its edges to resize it, or click elsewhere to jump there. The chart above shows only the window.

Arrow keys move between values. Ctrl and the wheel or a pinch zoom, drag to move, + and − zoom, 0 resets
Daily visits with an overview. Area chart, 1 series, 180 values, from 995 to 2,411
CategoryVisits
May 1, 20261,290
May 2, 20261,339
May 3, 20261,371
May 4, 20261,389
May 5, 20261,395
May 6, 20261,398
May 7, 20261,401
May 8, 20261,409
May 9, 20261,423
May 10, 20261,443
May 11, 20261,464
May 12, 20261,483
May 13, 20261,491
May 14, 20261,485
May 15, 20261,459
May 16, 20261,414
May 17, 20261,351
May 18, 20261,276
May 19, 20261,195
May 20, 20261,119
May 21, 20261,056
May 22, 20261,013
May 23, 2026995
May 24, 20261,004
May 25, 20261,037
May 26, 20261,089
May 27, 20261,154
May 28, 20261,222
May 29, 20261,287
May 30, 20261,343
May 31, 20261,387
Jun 1, 20261,419
Jun 2, 20261,442
Jun 3, 20261,460
Jun 4, 20261,478
Jun 5, 20261,501
Jun 6, 20261,532
Jun 7, 20261,572
Jun 8, 20261,618
Jun 9, 20261,665
Jun 10, 20261,707
Jun 11, 20261,737
Jun 12, 20261,749
Jun 13, 20261,738
Jun 14, 20261,703
Jun 15, 20261,645
Jun 16, 20261,571
Jun 17, 20261,487
Jun 18, 20261,404
Jun 19, 20261,329
Jun 20, 20261,271
Jun 21, 20261,236
Jun 22, 20261,223
Jun 23, 20261,233
Jun 24, 20261,261
Jun 25, 20261,301
Jun 26, 20261,345
Jun 27, 20261,388
Jun 28, 20261,424
Jun 29, 20261,452
Jun 30, 20261,473
Jul 1, 20261,489
Jul 2, 20261,506
Jul 3, 20261,530
Jul 4, 20261,563
Jul 5, 20261,609
Jul 6, 20261,668
Jul 7, 20261,736
Jul 8, 20261,807
Jul 9, 20261,873
Jul 10, 20261,928
Jul 11, 20261,962
Jul 12, 20261,973
Jul 13, 20261,956
Jul 14, 20261,914
Jul 15, 20261,852
Jul 16, 20261,777
Jul 17, 20261,698
Jul 18, 20261,624
Jul 19, 20261,562
Jul 20, 20261,517
Jul 21, 20261,492
Jul 22, 20261,485
Jul 23, 20261,492
Jul 24, 20261,508
Jul 25, 20261,526
Jul 26, 20261,543
Jul 27, 20261,553
Jul 28, 20261,557
Jul 29, 20261,557
Jul 30, 20261,557
Jul 31, 20261,563
Aug 1, 20261,579
Aug 2, 20261,611
Aug 3, 20261,661
Aug 4, 20261,728
Aug 5, 20261,809
Aug 6, 20261,897
Aug 7, 20261,983
Aug 8, 20262,059
Aug 9, 20262,116
Aug 10, 20262,149
Aug 11, 20262,156
Aug 12, 20262,136
Aug 13, 20262,095
Aug 14, 20262,039
Aug 15, 20261,975
Aug 16, 20261,913
Aug 17, 20261,858
Aug 18, 20261,817
Aug 19, 20261,789
Aug 20, 20261,774
Aug 21, 20261,769
Aug 22, 20261,767
Aug 23, 20261,765
Aug 24, 20261,757
Aug 25, 20261,742
Aug 26, 20261,719
Aug 27, 20261,694
Aug 28, 20261,670
Aug 29, 20261,655
Aug 30, 20261,654
Aug 31, 20261,674
Sep 1, 20261,716
Sep 2, 20261,780
Sep 3, 20261,863
Sep 4, 20261,956
Sep 5, 20262,052
Sep 6, 20262,141
Sep 7, 20262,215
Sep 8, 20262,268
Sep 9, 20262,296
Sep 10, 20262,300
Sep 11, 20262,283
Sep 12, 20262,250
Sep 13, 20262,210
Sep 14, 20262,168
Sep 15, 20262,132
Sep 16, 20262,105
Sep 17, 20262,087
Sep 18, 20262,076
Sep 19, 20262,069
Sep 20, 20262,061
Sep 21, 20262,046
Sep 22, 20262,021
Sep 23, 20261,985
Sep 24, 20261,940
Sep 25, 20261,890
Sep 26, 20261,841
Sep 27, 20261,801
Sep 28, 20261,778
Sep 29, 20261,777
Sep 30, 20261,802
Oct 1, 20261,852
Oct 2, 20261,924
Oct 3, 20262,011
Oct 4, 20262,105
Oct 5, 20262,197
Oct 6, 20262,278
Oct 7, 20262,341
Oct 8, 20262,384
Oct 9, 20262,407
Oct 10, 20262,411
Oct 11, 20262,402
Oct 12, 20262,387
Oct 13, 20262,372
Oct 14, 20262,360
Oct 15, 20262,356
Oct 16, 20262,357
Oct 17, 20262,362
Oct 18, 20262,365
Oct 19, 20262,362
Oct 20, 20262,346
Oct 21, 20262,315
Oct 22, 20262,269
Oct 23, 20262,208
Oct 24, 20262,139
Oct 25, 20262,069
Oct 26, 20262,007
Oct 27, 20261,960

Live stream

maxPoints keeps a sliding window of the last values and live slides the line to the left when a value arrives instead of morphing it. Press Play to stream a value every second.

Arrow keys move between values
Requests per second. Line chart, 1 series, 30 values, from 80 to 157
CategoryRequests
10s111
11s117
12s98
13s80
14s93
15s102
16s90
17s93
18s120
19s129
20s121
21s135
22s157
23s152
24s138
25s148
26s152
27s128
28s112
29s120
30s113
31s87
32s85
33s101
34s95
35s85
36s103
37s125
38s121
39s121

Legend

legendPosition puts the legend on any side, legendAlign aligns a top or bottom legend. A legend item toggles its series (the colours stay put) and the arrow keys move between items. A single series has no legend.

Arrow keys move between values
Build minutes by team. Area chart, 4 series, 8 values, from 90 to 460
CategoryWebMobilePlatformData
W131022015090
W2280260170110
W3350240160130
W4400300190120
W5380310230140
W6420290210160
W7460330240150
W8440360250180

Legend template

<ng-template txChartLegend let-item> draws each legend item yourself; the item still toggles its series. The context has label, color and hidden.

Arrow keys move between values
Income and spending. Area chart, 2 series, 6 values, from 4,100 to 6,900
CategoryIncomeSpending
Jan5,2004,100
Feb5,4004,600
Mar5,1004,300
Apr6,1004,800
May6,4005,200
Jun6,9005,000

Tooltip

The tooltip opens on the kit overlay, so it never gets clipped by a card. tooltipMode="single" shows only the series nearest to the pointer, tooltipFormatter formats each value, and <ng-template txChartTooltip let-data> replaces the whole content. It follows the keyboard focus too.

Arrow keys move between values
Average order value. Area chart, 2 series, 7 values, from 36 to 58
CategoryWebApp
Jan4236
Feb4439
Mar4143
Apr4745
May5244
Jun5549
Jul5853
Arrow keys move between values
Average order value with a custom tooltip. Area chart, 2 series, 7 values, from 36 to 58
CategoryWebApp
Jan4236
Feb4439
Mar4143
Apr4745
May5244
Jun5549
Jul5853

Download

The chart menu in the top right corner downloads the chart as SVG or PNG and its data as CSV; the files are named after ariaLabel. toolbar (on by default, also on column and pie charts) hides it.

Arrow keys move between values
Weekly orders. Area chart, 2 series, 8 values, from 24 to 640
CategoryOrdersReturns
W132024
W241031
W338028
W446030
W552036
W649033
W758040
W864038

Loading and empty

loading shows a skeleton of the same size, and a chart without values shows "No data" — the page does not move when the data arrives.

No data

Live

New series or categories redraw the chart in place: lines and areas morph to the new values instead of being rebuilt.

Arrow keys move between values
Requests per minute. Area chart, 1 series, 10 values, from 820 to 1,210
CategoryRequests
-9m820
-8m900
-7m870
-6m960
-5m1,010
-4m980
-3m1,120
-2m1,080
-1m1,150
now1,210

Large data

Long series are thinned with the largest-triangle method before drawing, so 20 000 points stay fast while peaks keep their shape; the tooltip and the keyboard still read every original value. Turn it off with [decimation]="false". The hidden data table for screen readers keeps an even sample of 250 rows.

Arrow keys move between values
Sensor readings, 20 000 points. Line chart, 1 series, 20000 values, from -827 to 230
CategoryReading
#150
#81146
#162176
#242157
#322222
#403192
#483130
#563148
#64467
#724-6
#8046
#884-70
#965-100
#1045-47
#1125-80
#1206-45
#128643
#136631
#144790
#1527158
#1607116
#1688145
#1768152
#184859
#192954
#200916
#2089-88
#2170-80
#2250-108
#2330-166
#2411-102
#2491-92
#2571-95
#26518
#273225
#281234
#2892118
#297388
#305363
#313392
#32143
#3294-48
#3374-48
#3455-149
#3535-172
#3615-149
#3696-209
#3776-168
#3856-105
#3937-123
#4017-42
#409717
#4177-8
#425856
#433860
#4418-10
#44999
#4579-46
#4659-140
#4740-131
#4820-194
#4900-254
#4981-206
#5061-231
#5141-228
#5222-133
#5302-133
#5382-97
#5463-7
#5543-34
#5623-20
#570416
#5784-67
#5864-89
#5944-102
#6025-212
#6105-227
#6185-237
#6266-314
#6346-275
#6426-247
#6507-269
#6587-179
#6667-136
#6748-142
#6828-55
#6908-52
#6989-91
#7069-51
#7149-112
#7230-186
#7310-178
#7390-265
#7471-321
#7551-294
#7631-351
#7711-346
#7792-272
#7872-289
#7952-234
#8033-149
#8113-169
#8193-120
#8274-80
#8354-148
#8434-139
#8515-161
#8595-267
#8675-272
#8756-313
#8836-399
#8916-365
#8997-376
#9077-403
#9157-314
#9237-294
#9318-283
#9398-182
#9478-183
#9559-187
#9639-130
#9719-191
#9800-233
#9880-226
#9960-328
#10041-372
#10121-367
#10201-452
#10282-444
#10362-401
#10442-437
#10523-368
#10603-301
#10683-315
#10764-234
#10844-199
#10924-244
#11004-203
#11085-232
#11165-319
#11245-312
#11326-380
#11406-463
#11486-439
#11567-488
#11647-516
#11727-442
#11808-450
#11888-423
#11968-323
#12049-329
#12129-297
#12209-231
#12290-286
#12370-290
#12450-284
#12530-387
#12611-413
#12691-433
#12771-532
#12852-524
#12932-517
#13012-566
#13093-496
#13173-456
#13253-463
#13334-365
#13414-337
#13494-354
#13575-287
#13655-319
#13735-376
#13816-358
#13896-441
#13976-512
#14057-502
#14137-581
#14217-608
#14297-558
#14378-593
#14458-557
#14538-471
#14619-482
#14699-422
#14779-354
#14860-395
#14940-364
#15020-357
#15101-449
#15181-452
#15261-492
#15342-596
#15422-587
#15502-617
#15583-676
#15663-613
#15743-605
#15824-607
#15904-504
#15984-488
#16064-478
#16145-393
#16225-423
#16305-446
#16386-416
#16466-504
#16546-554
#16627-555
#16707-657
#16787-680
#16868-659
#16948-720
#17028-679
#17109-618
#17189-637
#17269-555
#17350-496
#17430-519
#17510-455
#17590-450
#17671-519
#17751-498
#17831-552
#17912-646
#17992-637
#18072-702
#18153-763
#18233-714
#18313-743
#18394-739
#18474-646
#18554-647
#18635-609
#18715-519
#18795-545
#18876-528
#18956-493
#19036-576
#19117-595
#19197-609
#19277-719
#19357-733
#19438-747
#19518-824
#19598-784
#19679-759
#19759-782
#19839-691
#19920-650
#20000-654

Fill parent

height is a number in pixels (450 by default) or a string such as '100%' — then the chart fills a parent that has a definite height and redraws when it is resized.

Arrow keys move between values
Disk usage. Area chart, 1 series, 7 values, from 212 to 247
CategoryDisk, GB
Mon212
Tue218
Wed221
Thu230
Fri236
Sat239
Sun247

Events

pointClick reports the clicked value (seriesIndex, dataPointIndex, value, category) and seriesToggle reports a legend toggle.

Arrow keys move between values
New and returning customers. Area chart, 2 series, 6 values, from 120 to 392
CategoryNewReturning
Jan120310
Feb140320
Mar132342
Apr160351
May171377
Jun190392

Click a point or a legend item.

Accessibility

The chart is an image with a summary (ariaLabel plus the type, the number of series and values and the range) and a visually hidden data table for screen readers. Tab to the chart and use ←/→ to move between values, ↑/↓ to switch series, Home / End and Escape — each value is announced and the tooltip follows.

Arrow keys move between values
Support tickets in the first half of the year. Area chart, 2 series, 6 values, from 142 to 192
CategoryOpenedSolved
January180170
February164168
March192185
April175180
May150158
June142147

Design tokens

dt changes the tokens of one chart: the series palette (series.color1 … color7), the line width, the area fade, the grid. A series can also bring its own color.

Arrow keys move between values
Energy use. Area chart, 3 series, 6 values, from 40 to 460
CategorySolarGridBattery
Jan12042040
Feb18038060
Mar26033090
Apr340280120
May410230150
Jun460200170

Pass through

pt adds classes and styles to the parts — root, legend, legendItem, plot, svg, grid, axis, series, line, area, marker, crosshair, tooltip, empty, skeleton. unstyled drops the tectra styles and keeps the behaviour.

Arrow keys move between values
Forecast and actual. Area chart, 2 series, 6 values, from 96 to 158
CategoryForecastActual
Jan10096
Feb110114
Mar120117
Apr130136
May140139
Jun150158

An Angular UI kit that feels finished. Open source under the MIT license.