TuxChartGauge

Interactive Telemetry Lab

Arc Gauge & Progress Telemetry Workbench

Presets:

Token utilization

72%

Properties Inspector4 configurable knobs

Telemetry Metricdataset

Gauge Variantvariant

Show Tone BandsshowBands

true

Gauge Sizesize

Dynamic Component Syntax

<tux-chart-gauge
  :value="72"
  :min="0"
  :max="100"
  center-label="Token utilization"
  :center-value="72"
  units="%"
  :bands="targetBands"
/>

flagship · arc with needle

On-time delivery

No bands — neutral track with a needle at value. Use when target zones aren't well-defined; the needle position itself is the signal.

On-time delivery

78%

<tux-chart-gauge
  :value="78"
  :min="0"
  :max="100"
  center-label="On-time delivery"
  :center-value="78"
  units="%"
/>

arc with tone bands

Token utilization

Pass bands to mark target zones. Each band has from, to, and either a tone (success / warning / error — status tokens) or a toneIndex (1..8 chart palette). The needle reads against the bands.

Token utilization

72%

<tux-chart-gauge
  :value="72"
  :min="0"
  :max="100"
  :bands="utilizationBands"
  center-label="Token utilization"
  :center-value="72"
  units="%"
/>

progress variant

Radial progress

Pass variant="progress" for a single filled arc with no needle and no bands. Better for percent-of-max ("X tokens of Y context") where there are no qualitative zones.

Context used

6,420 tok

<tux-chart-gauge
  variant="progress"
  :value="6420"
  :min="0"
  :max="8000"
  center-label="Context used"
  :center-value="6420"
  units=" tok"
/>

progress with status bands

High-availability SLA uptime

Progress variant with colored background track showing target thresholds. The arc fill changes hue based on which band the value currently falls in.

API uptime

99.84%

<tux-chart-gauge
  variant="progress"
  :value="99.84"
  :min="95"
  :max="100"
  :bands="slaBands"
  center-label="API uptime"
  :center-value="99.84"
  units="%"
/>