Gauge

Gauge

<ax-gauge> is a Pro radial meter. Its geometry is driven by startAngle / endAngle (degrees, clockwise from 3 o’clock), so you can render any arc. Self-gates with a PRO watermark until licensed.

Import

import { AxGaugeComponent } from '@axisui-ng/charts';

Usage

<!-- bottom semicircle -->
<ax-gauge [value]="72" [startAngle]="0" [endAngle]="180" label="Score" ariaLabel="Score" />

<!-- speedometer (three-quarter) -->
<ax-gauge [value]="48" [startAngle]="135" [endAngle]="405" label="Load" ariaLabel="Load" />

Inputs

Input	Type	Default	Notes
value	number (required)	—	Current value.
min	number	0	Value domain minimum.
max	number	100	Value domain maximum.
startAngle	number (required)	—	Arc start, degrees clockwise from 3 o’clock.
endAngle	number (required)	—	Arc end, degrees.
colorIndex	number	1	Clamped to 1–5 → value-arc --color-chart-N.
label	string	''	Caption under the center value.
ariaLabel	string	''	Meter name; empty falls back to label, then 'Gauge'.

Accessibility

Host role="meter" with aria-valuenow / min / max and aria-valuetext as "{value} of {max}". aria-label comes from ariaLabel, else label, else 'Gauge'.

License

Pro component — see ProWatermark for how the watermark/gating works.

Storybook

Interactive examples live in Storybook under Pro / Gauge. Run pnpm storybook to explore them.