The Progress Bar Widget Node visualizes the completion or status of a metric as a horizontal bar that fills based on a specified numeric value. It’s ideal for showing progress toward targets, thresholds, or capacity.
What Is a Progress Bar?
A Progress Bar visually communicates how far along a value is between a minimum and maximum range. The fill level of the bar grows proportionally to the received input, making it a useful indicator of status, utilization, or performance at a glance.
Step-by-Step: How to Configure the Progress Bar Widget Node
-
Add the widget
-
Drag the Progress Bar Widget Node from the Visualizations panel to the canvas.
-
-
Connect the widget to the data source
-
Link the widget to the upstream workflow node that emits the numeric field.
-
This field must match the JSON key to display.
-
-
Open configuration
-
Double-click the widget to open the configuration window.
-
General Settings
| Field | Requirement | Description |
|---|---|---|
| Widget Name* | Required | Main title of the widget (e.g., Tank Fill Level). |
| Widget Subtitle | Optional | Subheading displayed below the title. |
| JSON Key to Display* | Required | Field name in the JSON payload that holds the value. |
| Show UID / Label Name | Optional | Toggle to show the associated device or label name. |
| Decimal Places | Optional | Number of decimal places to display inside the bar. |
| Calculation | Optional | Value extraction logic (default: Last value received). |
Range Configuration
| Field | Requirement | Description |
|---|---|---|
| Min* | Required | The starting (0%) point of the progress bar. |
| Max* | Required | The full (100%) point of the progress bar. |
| Hex Color* | Required | Bar color shown as progress fills (e.g., #4caf50). |
Add multiple color ranges if different thresholds require unique styling.
Tooltip & Interface
| Field | Requirement | Description |
|---|---|---|
| Enable Tooltip | Optional | Display a hover tooltip with additional information. |
| Tooltip Text | Optional | Custom message shown when the user hovers over the widget. |
| Add to Interface* | Required | Assign the widget to one or more dashboard interfaces. |
Grouping & Display
| Field | Requirement | Description |
|---|---|---|
| Select Label | Required (if grouped) | Choose label to filter/group widget by category. |
| Grouped Display Mode | Optional | Choose: - No Grouping - Group by Label Value - Group by Label Name |
| Number of Widgets to Display | Optional | Limit number of widgets rendered in grouped view. |
Use Cases
-
Display job or task completion percentage
-
Show resource utilization (e.g., memory, battery, inventory)
-
Track progress toward quota or goal
-
Visualize time-based completion rates
Best Practices
-
Use meaningful range min/max values to match real-world targets
-
Set color thresholds for intuitive visual signaling
-
Limit decimal precision for readability
-
Group by device labels to show multiple progress bars in one view
-
Use tooltips to add context or explanation
Frequently Asked Questions (FAQ)
Q: Can I use multiple colors for different ranges?
A: Yes, add additional range rows with their own min/max and hex color to visually indicate status zones.
Q: What happens if the value exceeds the max?
A: The bar will typically cap at 100%, though the actual value may still be shown or highlighted via tooltip.
Q: Can the bar animate when updated?
A: This depends on the platform styling but is supported in most Rayven dashboards by default.