Charts

Bullet Chart

A value against a target over qualitative ranges, one compact row per measure on a shared scale — a dashboard-friendly replacement for a row of gauges. 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

Each row has the ranges as shaded bands (the first, the darkest, is "poor"), the value as a bar and the target as a mark. ranges and max are shared by every row.

Quarter goals. Bullet chart, 1 series, 4 values
Category	Value	Target
Revenue	78%	90%
New clients	64%	70%
Retention	93%	88%
NPS	51%	75%

Own ranges

ranges on an item override the shared ones, so each measure keeps its own thresholds on the common scale.

Response times, ms. Bullet chart, 1 series, 3 values
Category	Value	Target
Search	320	400
Checkout	610	500
Profile	180	250

Colors

color on an item paints its value bar — for example by status.

Service levels. Bullet chart, 1 series, 3 values
Category	Value	Target
Uptime	96	99
Latency	72	80
Errors	38	60

Events

barClick reports the clicked row with its value and target.

Click a part. Bullet chart, 1 series, 2 values
Category	Value	Target
Sales	64	70
Leads	82	75

Click a row.

10 lines

<div class="wrap">  <tx-bullet-chart    [items]="items"    [ranges]="[50, 80]"    [max]="100"    ariaLabel="Click a part"    (barClick)="onClick($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty items 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)="items.set([])"></button>  </div>  <tx-bullet-chart    [items]="items()"    [ranges]="[50, 80]"    [max]="100"    [loading]="loading()"    ariaLabel="Loaded data"  /></div>

Live

New items redraw in place — value bars slide to their new length.

Shuffled data. Bullet chart, 1 series, 3 values
Category	Value	Target
North	20	70
South	43	60
East	71	80

11 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-bullet-chart    [items]="items()"    [ranges]="[50, 80]"    [max]="100"    ariaLabel="Shuffled data"  /></div>

Accessibility

Tab to the chart: ↑/↓ walk the rows and each one is announced with its value and target; Home / End jump to the ends. Screen readers also get a summary and a hidden table.

Team goals. Bullet chart, 1 series, 2 values
Category	Value	Target
Velocity	62	70
Quality	81	75

Design tokens

dt sets the row height, the range shades, the bar and target size and colour of one chart.

Survey scores. Bullet chart, 1 series, 2 values
Category	Value	Target
Clarity	74	80
Speed	58	65

15 lines

<tx-bullet-chart    [items]="items"    [ranges]="[30, 60]"    [max]="100"    [dt]="{      bullet: {        rowHeight: '56',        barHeight: '0.22',        barColor: 'var(--tx-purple-500)',        targetColor: 'var(--tx-red-500)',        targetWidth: '3',      },    }"    ariaLabel="Survey scores"  />

Pass through

pt reaches the parts — range, bar, target, grid, axis, plot, tooltip and more.

Plan versus fact. Bullet chart, 1 series, 2 values
Category	Value	Target
Plan A	66	75
Plan B	88	80

Unstyled

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