Gauge

The Gauge component is a visual indicator used to show progress toward a goal or threshold. It consists of a circular or semi-circular dial, where a pointer represents the current value and a target marker indicates the desired goal.

Gauges are useful for at-a-glance performance tracking, providing an immediate sense of whether a metric is within acceptable ranges.

Best Situations to Use

Use a Gauge when you want to:

• Display progress toward a target (e.g., revenue vs. goal, utilization vs. capacity).

• Provide an at-a-glance view of whether a KPI is on track, lagging, or exceeding targets.

• Show performance ranges (e.g., poor, satisfactory, excellent).

• Visualize bounded metrics with defined minimum and maximum values.

Not Recommended for:

• Comparisons between multiple categories (use bar or line charts instead).

• Dashboards requiring detailed trend analysis over time.

Properties

Background

• Border: Enable or disable a border around the gauge.

• Border Color: Select border color.

• Border Radius: Round the corners of the gauge container.

• Shadow: Enable or disable shadow effect.

• Shadow Color: Define shadow hue.

• Shadow Transparency: Adjust shadow opacity.

• Gradient Rotation: Adjust the position and angle of gradient fill if two or more colors are applied.

General

• Component Name: Assign a unique identifier.

• Left / Top: Define position on the dashboard canvas.

• Height / Width: Specify component dimensions.

• Initial Visibility: Toggle whether the gauge is visible on first preview.

• Ticks: Enable to display marker lines on the gauge scale.

• Show Range: Enable to display ranges across the gauge dial.

• Show Title: Enable to display a title inside the gauge.

• Title Units: Define the unit (e.g., %, $, kWh) to be shown with the title.

⚠️ Note: If Initial Visibility is unchecked, the gauge will not appear in the first preview.

Indicators

• Range Colors: Define colors for performance bands (e.g., red = poor, green = good).

• Value Variable: Specify the data field for the current value.

• Target Value: Define the benchmark goal to be displayed.

• Minimum / Maximum Range: Set the lower and upper bounds of the gauge.

Style

• Bezel Color: Adjust the gauge border color.

• Face Color: Define the fill color inside the gauge.

• Tick Color: Change the color of tick marks/markers.

• Pointer Color: Customize the pointer color.

• Label Font: Customize label font color, family, and size.

• Title Font: Adjust title font color, family, and size.

Formatter

• Apply formatting for numerical or monetary data (e.g., $100K, 75%).

Example Configurations

By adjusting the above properties, users can:

• Show a basic gauge with pointer and target marker.

• Apply gradient fills for ranges (e.g., red–yellow–green).

• Use ticks and labels for precision or minimal styling for simplicity.

• Configure monetary KPIs with custom formatters.

Notes

• Gauges are most effective for single KPI monitoring.

• Limit the use of gauges in dashboards — too many can overwhelm the user.

• Use contrasting colors for pointer and ranges to maximize readability.