FlexiGauge Meter — Documentation

Overview

FlexiGauge Meter is a customizable and reusable gauge chart component designed for OutSystems applications. It enables developers to visually represent dynamic values like percentages, scores, speeds, or system loads using semi-circular or full-arc gauges.

This component is optimized for dashboards, analytics, performance monitoring, health apps, and system status indicators.

FlexiGauge Meter comes with three distinct styles of meter: Alpha, Beta, and Gamma. Refer to the Try Now link or scroll to the Screenshots section to preview each variant.

Features

• Dynamic Data Binding — Update values on the fly
• Multi-color Arc Support — Gradient or segmented colors
• Custom Range Support — Adjustable min/max and step intervals
• Adjustable Size and Angles — Semi-circle, ¾, or full-circle view
• Dark/Light Mode Friendly — Background & text color options
• Reusability — Plug-and-play for any OutSystems screen/block

Output

Renders a smooth, animated gauge meter with:

• Numeric value at the center
• Arc(s) showing relative magnitude
• Unit text and optional title
• Tick marks (if enabled in future versions)

How to Use (In OutSystems)

1. Add the Component
   • Install FlexiGauge Meter from the Forge
   • Drag the block/widget into your screen or web block
2. Set Parameters
   • Bind inputs to the gauge meter block
3. Sample input

   {
     "maxValue": 100,
     "currentValue": 75,
     "stepInterval": 25,
     "unit": "%",
     "size": 350,
     "arcColors": ["#4ade80", "#22c55e", "#16a34a", "#15803d"],
     "bgColor": "#f0fdf4",
     "valueColor": "#065f46",
     "startAngle": -120,
     "endAngle": 120
   }