Visualization library
Labels
📌 What are they?
Labels act as immediate visual indicators through shapes that are filled proportionally to the value received. They are designed to quickly and intuitively show the magnitude of a variable, especially useful in operational or maintenance environments.
🔍 Highlighted functionality: allows for the inclusion of a target value, represented as a white background, and can be configured with color thresholds, making it easier to visually detect anomalous states.

🎯 When to use them?
When it is necessary to display values in real time without displaying complex graphs.
In contexts where it is important to summarize key information in a compact and readable manner.
To visually associate a value with a 3D object or a specific location within the digital twin.
As an immediate visual reinforcement against deviations from targets or conditions out of range.
🧠 Cognitive advantage: reduces the mental load of the end user by facilitating the contextual interpretation of the data (what it is, where it is, what it means).
📥 Data Sending Formats
▸ From dataset
Example of structure:
Date | Temperature | Target Temperature |
---|---|---|
04/17/2025 | 22 | 25 |
04/18/2025 | 20 | 25 |
04/19/2025 | 26 | 25 |
04/20/2025 | 17 | 25 |
The displayed value will be from the last row.
Defined in the panel:
Value:
Temperature
Value type:
Number
Popup:
Date
,Temperature
,Target Temperature

▸ From MQTT
Simple labels:
Labels with target:
🖥️ Visualization in the App
Labels are positioned directly over 3D objects or locations of the twin.
They render as colored shapes (circle, bar, card, etc.).
If configured for a popup, additional details are shown on hover.
If thresholds are configured, the color of the shape updates dynamically.
When there is a target, it is represented as a white background that shows the degree of compliance. Labels can be visualized as follows:


🛠️ Configuration of label visualization (in 3D App)
Once the KPI type label has been created from the Admin Panel, in the 3D visualization App it is possible to adjust its visual appearance, behavior according to thresholds, and other graphic aspects. These are grouped in the following sections:
🔹 Structure
Configuration of Name
Customize Name: allows changing the text of the KPI (instead of the name of the data).
Hide Name: removes the name visually from the render.
Name Alignment: align the name to the left, center, or right.
Customize Name Size:
Activate/deactivate.
Numeric scale (e.g.:
0.8
).
Dimensions
Width and Height of the label/card shape.
Proportional numeric values (e.g.:
10
and8
).
🔹 Label Configuration
Axis (reference values for proportional visualization)
Maximum value: value considered 100% (full fill).
Minimum value: value considered 0% (empty fill).
Correct value color: applied if the value is within the desired range.
Target color: visually represents the target with a white background or secondary bar.
Color of value above target: to highlight if the target value is exceeded.
Data (semantic thresholds)
Maximum / minimum threshold: defines the expected range of the value.
Color above threshold: activated if the data exceeds the maximum.
Color below threshold: for anomalously low values.
🔹 Unit Configuration
Separated units: shows the value followed by the unit (
25 °C
).Joined units: allows for a unified visual presentation.
Value units: field where the desired unit is manually entered (
kWh
,%
,bar
, etc.).
🔹 Others
Custom font size: enables control over the typographic size of the value.
Recommended value according to visual proportion (
1.2
,1.5
, etc.).
Value color: defines the typographic color of the displayed number.
Show background: option to enable or disable visual background behind the value.



✅ Best Practices
Recommendation | Why it’s important |
---|---|
Associate the label with the real object | Contextualizes the data and improves situational understanding. |
Use colors consistent with states | Reinforces semantic reading (green = normal, red = alert). |
Avoid visual saturation | Many labels in one view can hinder interpretation. |
Include unit | Increases clarity (e.g. °C, %, kWh). |
Keep popup informative but concise | Do not overload with irrelevant text. |