Semi Gauge

The Semi Gauge is a variation of the gauge chart that displays values using a semi-circular dial. It is commonly used to show progress toward a goal, performance against thresholds, or KPI tracking in a compact and intuitive format.

The semi-gauge uses a needle to indicate the current value against a defined range, with additional support for target markers, ranges, and gradient backgrounds.

Best Situations to Use

Use the Semi Gauge when you want to:

• Track progress toward a KPI or target in a clear, visual way.

• Provide an at-a-glance performance indicator with ranges (e.g., red/yellow/green).

• Use a compact alternative to a full circular gauge.

• Add a speedometer-style display for operational metrics.

Not Recommended for:

• Comparing multiple categories side by side (use bar or line charts instead).

• Trend analysis across time periods.

Properties

Background

• Border: Enable or disable a border.

• Border Color: Select a color for the border.

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

• Shadow: Enable or disable shadow effect.

• Shadow Color: Define the shadow hue.

• Shadow Transparency: Adjust shadow opacity.

• Gradient Rotation: Adjust the angle/position of gradient when 2 or more colors are applied.

General

• Component Name: Assign a unique identifier.

• Left / Top: Position the Semi Gauge on the dashboard.

• Height / Width: Define dimensions.

• Initial Visibility: Toggle visibility on first preview.

• Ticks: Show or hide tick marks on the gauge.

• Show Title: Enable title display at the top of the gauge.

• Title Units: Enter units (e.g., %, $, kWh) to display with the title.

Indicators

• Range Colors: Assign colors to different performance ranges.

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

• Target Value: Define the benchmark or target goal.

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

Style

• Speedometer Width: Adjust the width of the gauge arc.

• Needle Settings:

  • Needle Width: Control thickness of the needle.

  • Needle Color: Set the color of the needle.

• Center Color: Define the fill color of the gauge’s center circle.

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

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

Formatter

• Apply custom formatting for values (e.g., percentage, currency, or custom number formats).

Example Configurations

1. Basic Semi Gauge

   • Single range color with ticks enabled.

   • Shows value and target with needle indicator.

2. Multi-Range Semi Gauge

   • Uses red/yellow/green ranges for poor, average, and good performance.

   • Includes units in title (e.g., Utilization %).

3. Styled Semi Gauge

   • Gradient background, custom center color, and bold labels.

   • Formatter applied for monetary values (e.g., $250K).

Notes

• Semi Gauges are ideal for executive dashboards where KPIs must be easily understood.

• Use contrasting colors for ranges and needle to improve readability.

• Limit the number of ranges (3–5 recommended) to avoid clutter.

• Formatter properties ensure values are displayed in a business-relevant format.