Charts

Scatter Chart

Points on two value axes to see how two measures relate — and bubbles when a third value sets the size. 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).

Features15

API

Theming

Basic

Points on two value axes, one colour per series. Hover a point: it gets a ring and dashed guides to both axes, and the tooltip shows its x and y named after the axis titles.

Session length and pages viewed. Scatter chart, 2 series, 24 values, from 2 to 21
Category	Session length, min	Pages viewed
Desktop	4.2	6
Desktop	6.8	9
Desktop	9.1	11
Desktop	12.4	15
Desktop	3.1	4
Desktop	7.7	12
Desktop	10.6	13
Desktop	14.8	19
Desktop	5.5	8
Desktop	8.9	10
Desktop	11.7	17
Desktop	16.2	21
Mobile	1.8	3
Mobile	2.9	4
Mobile	3.7	4
Mobile	5.2	6
Mobile	6.1	7
Mobile	2.4	2
Mobile	4.6	5
Mobile	7.3	9
Mobile	8.4	8
Mobile	3.3	5
Mobile	5.9	5
Mobile	9.6	10

Bubble

A size on the points turns them into bubbles. The area of a bubble follows its size, the biggest are drawn first and the tooltip adds the size under sizeLabel, formatted by sizeFormat.

Price, rating and number of reviews by product. Bubble chart, 2 series, 8 values, from 3.7 to 4.8
Category	Price, $	Rating	Reviews
Headphones, Model S	49	4.1	1.2K
Headphones, Model M	89	4.4	5.4K
Headphones, Model L	149	4.6	8.9K
Headphones, Model Pro	299	4.8	2.1K
Speakers, Mini	39	3.7	800
Speakers, Home	119	4.2	3.6K
Speakers, Room	199	4.5	6.2K
Speakers, Studio	349	4.3	950

10 lines

<tx-scatter-chart    [series]="series"    xAxisTitle="Price, $"    yAxisTitle="Rating"    sizeLabel="Reviews"    sizeFormat="compact"    [yMin]="3"    [yMax]="5"    ariaLabel="Price, rating and number of reviews by product"  />

Trend line

trendLine fits a straight least-squares line through every series and draws it dashed in the series colour over its x range.

Ad spend and sign-ups by week. Scatter chart, 2 series, 18 values, from 90 to 390
Category	Ad spend, $K	Sign-ups
Search	2	120
Search	3	160
Search	4	170
Search	5	230
Search	6	240
Search	7	300
Search	8	310
Search	9	360
Search	10	390
Social	2	90
Social	3	95
Social	4	130
Social	5	120
Social	6	150
Social	7	140
Social	8	175
Social	9	170
Social	10	190

Point colors and labels

color on a point overrides the series colour — here the slow services are marked. label names the point in the tooltip and in the data table for screen readers.

Response time and error rate by service. Scatter chart, 1 series, 6 values, from 0.2% to 4.8%
Category	Response time, ms	Error rate
Services, Auth	120	0.4%
Services, Search	210	0.9%
Services, Billing	340	1.6%
Services, Profile	95	0.2%
Services, Reports	640	4.8%
Services, Export	480	3.1%

7 lines

<tx-scatter-chart    [series]="series"    xAxisTitle="Response time, ms"    yAxisTitle="Error rate"    valueFormat="percent"    ariaLabel="Response time and error rate by service"  />

Time axis

xType="time" takes dates, timestamps or ISO strings and places them at their real distance on a calendar axis.

Build duration over time. Scatter chart, 2 series, 12 values, from 11 to 31
Category	x	Duration, min
Main	Sep 2, 2026	14
Main	Sep 9, 2026	16
Main	Sep 17, 2026	15
Main	Sep 28, 2026	19
Main	Oct 6, 2026	18
Main	Oct 15, 2026	22
Main	Oct 27, 2026	12
Main	Nov 3, 2026	11
Release	Sep 5, 2026	24
Release	Sep 21, 2026	27
Release	Oct 10, 2026	31
Release	Oct 30, 2026	21

Axes

Compact numbers on both axes with xValueFormat and valueFormat, a log y axis for values of very different size, horizontal grid lines only and the y axis on the right.

Population and area by city. Scatter chart, 1 series, 7 values, from 12 to 1.5K
Category	Population	Area, km²
Cities, City A	2.1M	105
Cities, City B	3.6M	890
Cities, City C	870K	41
Cities, City D	1.8M	755
Cities, City E	540K	220
Cities, City F	4.2M	1.5K
Cities, City G	320K	12

12 lines

<tx-scatter-chart    [series]="series"    xAxisTitle="Population"    yAxisTitle="Area, km²"    xValueFormat="compact"    valueFormat="compact"    yScale="log"    grid="value"    yAxisPosition="right"    [height]="380"    ariaLabel="Population and area by city"  />

Annotations

Annotations on value axes: an x-band between two numbers and a y-line for a limit.

Services against their limits. Scatter chart, 1 series, 6 values, from 0.2 to 4.8
Category	Response time, ms	Error rate, %
Services, Auth	120	0.4
Services, Search	210	0.9
Services, Billing	340	1.6
Services, Profile	95	0.2
Services, Reports	640	4.8
Services, Export	480	3.1

7 lines

<tx-scatter-chart    [series]="series"    [annotations]="annotations"    xAxisTitle="Response time, ms"    yAxisTitle="Error rate, %"    ariaLabel="Services against their limits"  />

Tooltip template

txChartTooltip replaces the tooltip content: data.title is the point label, data.rows hold the series, x, y and size with their formatted value.

Experience and closed tasks. Scatter chart, 1 series, 6 values, from 42 to 88
Category	Experience, years	Tasks closed
Team, Robin	1	42
Team, Sam	3	61
Team, Alex	4	58
Team, Jordan	6	77
Team, Taylor	8	70
Team, Casey	11	88

13 lines

<tx-scatter-chart    [series]="series"    xAxisTitle="Experience, years"    yAxisTitle="Tasks closed"    ariaLabel="Experience and closed tasks"  >    <ng-template txChartTooltip let-data>      <div class="tip">        <strong>{{ data.title }}</strong>        <span>{{ data.rows[1].value }} years · {{ data.rows[2].value }} tasks</span>      </div>    </ng-template>  </tx-scatter-chart>

Events

pointClick reports the clicked point with its index in the series data, its values and label; seriesToggle reports legend changes.

Story points and days to close. Scatter chart, 2 series, 6 values, from 1 to 12
Category	Story points	Days
Features, Export	3	4
Features, Filters	5	7
Features, Reports	8	12
Bugs, Typo	1	1
Bugs, Crash	2	3
Bugs, Sync	5	4

Click a point or a legend item.

12 lines

<div class="wrap">  <tx-scatter-chart    [series]="series"    [height]="280"    xAxisTitle="Story points"    yAxisTitle="Days"    ariaLabel="Story points and days to close"    (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

12 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-scatter-chart    [series]="series()"    [loading]="loading()"    [height]="260"    ariaLabel="Load and latency"  /></div>

Live

Changing series or trendLine redraws in place — points slide to their new place and bubbles grow or shrink.

Bubbles

Trend line

Shuffled sample. Scatter chart, 2 series, 24 values, from 0 to 75
Category	x	y
Sample A	0	0
Sample A	7	21
Sample A	14	20
Sample A	16	35
Sample A	23	34
Sample A	25	49
Sample A	32	47
Sample A	39	69
Sample A	41	61
Sample A	48	60
Sample A	50	75
Sample A	57	73
Sample B	4	11
Sample B	6	26
Sample B	13	20
Sample B	15	11
Sample B	22	28
Sample B	29	22
Sample B	31	37
Sample B	38	31
Sample B	40	45
Sample B	47	39
Sample B	54	33
Sample B	56	48

13 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>    <tx-toggle-switch label="Bubbles" [(ngModel)]="bubbles" />    <tx-toggle-switch label="Trend line" [(ngModel)]="trend" />  </div>  <tx-scatter-chart    [series]="series()"    [trendLine]="trend()"    [height]="300"    ariaLabel="Shuffled sample"  /></div>

Tab to the chart: ←/→ walk the points of a series in x order, ↑/↓ jump to the nearest point of the next series, Home / End go to the ends, Escape closes the tooltip. Each point is announced with its axis names; screen readers also get a summary and a hidden table of every point.

Hours studied and test score. Scatter chart, 2 series, 10 values, from 49 to 88
Category	Hours studied	Score
Morning group	2	58
Morning group	4	66
Morning group	5	71
Morning group	7	80
Morning group	9	88
Evening group	1	49
Evening group	3	60
Evening group	6	69
Evening group	8	77
Evening group	10	85

Design tokens

dt sets the point and bubble radius, the fill opacity, the trend line width and dash and the palette of one chart.

Temperature and sales. Scatter chart, 1 series, 8 values, from 185 to 614
Category	x	y
Sales	14	215
Sales	16	325
Sales	12	185
Sales	19	412
Sales	22	522
Sales	18	406
Sales	25	614
Sales	23	544

9 lines

<tx-scatter-chart    [series]="series"    trendLine    [dt]="{      scatter: { pointRadius: '7', fillOpacity: '0.5', trendWidth: '2.5', trendDash: 'none' },      series: { color1: 'var(--tx-green-500)' },    }"    ariaLabel="Temperature and sales"  />

Pass through

pt reaches the parts — point, trendLine, guide, grid, axis, legend, legendItem, plot, tooltip and more. Here the points become rings in the series colour.

Width and height of parts. Scatter chart, 2 series, 10 values, from 3.9 to 5.7
Category	x	y
Batch 1	10.2	4.1
Batch 1	10.6	4.4
Batch 1	9.8	3.9
Batch 1	10.9	4.6
Batch 1	10.1	4.2
Batch 2	11.4	5.1
Batch 2	11.9	5.4
Batch 2	11.1	4.8
Batch 2	12.3	5.7
Batch 2	11.7	5.2

13 lines

<tx-scatter-chart    [series]="series"    [pt]="{      point: {        style: {          'fill-opacity': '0.25',          'stroke-width': '2',          stroke: 'var(--tx-scatter-chart-color)',        },      },    }"    ariaLabel="Width and height of parts"  />

Unstyled

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