Gauge
One value on a scale — a progress arc in a tone, or a needle over coloured bands such as good, warning and critical. 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).
Basic
Without bands the value fills a progress arc from the start of the scale. label is the caption under the value; ticks with values stand around the arc.
Tones
tone colours the progress arc — primary, success, info, warn, danger or neutral; color takes any CSS colour.
Bands
bands colour ranges of the scale by tone or color, and a needle points at the value. Screen readers hear the label of the band the value is in.
Half circle
startAngle and endAngle set the arc — -90 / 90 draws a half circle. needle puts a needle over the plain track even without bands.
Format and scale
A scale from min to max, the number of ticks and valueFormat for the value and the ticks — compact numbers here.
Group
Small gauges side by side in cards for a dashboard row; showTicks off keeps them clean.
Live
A new value slides the progress arc and swings the needle smoothly.
Loading and empty
loading keeps the size with a skeleton; a null value shows "No data".
Accessibility
The gauge is one image for screen readers: ariaLabel, the caption, the value with the scale and the label of the band — "Checkout service, Gauge, Error budget used: 83% of 0% to 100%, Exhausted". It takes no focus: there is nothing to walk.
Design tokens
dt sets the arc thickness (share of the radius), the track and tone colours, the needle, the hub, the ticks and the value text of one gauge.
Pass through
pt reaches the parts — track, progress, band, needle, tick, value, label, plot and more. Here the bands are softer.
Unstyled
unstyled removes the tectra styles: no tokens, no fonts, no motion — the arc, the ticks and the value stay, ready for your own CSS.