Gauge

Gauge is a compact circular indicator for a value from 0 to 100. Use it to show a percentage metric such as usage, quota, capacity, health, score, or completion.

Key Features:

Radial metric: Shows a single percentage-like value in a compact circular shape.
Value slot: Use ngs-gauge-value to display a number or short label.
Custom size: Set dimensions with Tailwind size classes or component tokens.
Custom stroke: Adjust strokeWidth and radius for different visual weights.

Use Gauge in dashboard cards, sidebar widgets, KPI panels, usage blocks, storage indicators, completion scores, health scores, and utilization indicators. Do not use it for loading states, linear process progress, full analytical charts, or small table-row statuses.

The NgStarter Angular Gauge component lets you visualize one compact 0–100 percentage-like value as a circular radial metric. Use in dashboard cards, sidebar widgets, KPI panels, usage or quota blocks, storage usage, completion score, health score, capacity, and utilization indicators. It includes examples for Basic Gauge, Gauge With Value, Gauge Custom Size, and Gauge Custom Stroke Width.

Basic Gauge

Use Gauge to show one compact 0–100 radial metric.

Gauge With Value

Add ngs-gauge-value when the value or a short label should appear inside the gauge.

33%

$62.00

Gauge Custom Size

Gauge Custom Stroke Width

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.