Simple columns/bars

📌 What are they?

The Column, Simple Bars, and Bars with Circles visualization allows representing a single variable or data series across a set of categories or time units. Each value is displayed as an individual bar (vertical or horizontal), facilitating a clear and direct comparison among elements. In the case of bars with circles, as many circles are represented as the amount of data (recommended for quantities <20).

🔍 It is one of the most straightforward formats to show basic trends or simple distributions, and it is especially useful in operational views where visual saturation is to be avoided.

Columns	Bars	Circles

🎯 When to use them?

• Comparison of quantities or magnitudes among different categories or units.

• Visualize how a single indicator varies across different time units.

• Represent the total amount distributed among different independent categories.

• Show a ranking ordered from highest to lowest or from best to worst.

📥 Data Submission Formats

▸ From dataset

Example structure:

• Defined in the panel:

  • Label: Month (category that will be displayed on the axis)

  • Label type: String

  • Value: Sales (value that determines the size of the column/bar or the number of circles)

  • Value type: Number

  • Popup: Product B, Product C

  

▸ From MQTT

🛠️ Visualization Configuration

Once the label type KPI has been created from the Admin Panel, it is possible to adjust its visual appearance, behavior according to thresholds, and other graphic aspects in the 3D visualization App. These are grouped into the following sections:

🔹 Structure

Name Configuration

• Customize Name: allows replacing the automatic name of the KPI with a manually defined name.

• Hide Name: hides the chart name if a cleaner visualization is desired.

• Name Alignment: horizontal alignment options (left, center, right).

• Customize Name Size:

  • Font size scale of the name (0.4, 0.9, etc.).

Dimensions

• Width and Height of the card/shape of the label.

  • Proportional numeric values (e.g., 10 and 8).

🔹 Label Configuration

Axis (reference values for proportional visualization)

• Maximum value: value considered 100% (total 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.

• Value color above the target: to highlight if the target value is exceeded.

Data (semantic thresholds)

• Maximum / minimum threshold: defines the expected range of the value.

• Color above the threshold: activated if the data exceeds the maximum.

• Color below the threshold: for abnormally low values.

🔹 Legend and Animations

Legend

• Hide Legend: allows removing the legend if not needed.

• Size of legend values: text scale of the legend.

• Number of columns: organizes the legend elements into n columns.

• Center legend values: centers the text within the legend area.

Animations

• Activate animation on value updates: makes the bars update with animation when new data arrives.

• Animation duration: defines the speed of the animation (in seconds).

🔹 Simple Bar Graph

Colors

• Value column color: selects the color of the bars in the graph.

Values

• Show value: activates/deactivates the number above each bar.

• Value label size: adjusts the font size of the values that appear above the bars.

Dimensions

• Spacing between columns: controls space between bars (0.9, 1.0, etc.), affecting visual density.

🔹 Simple visualization (without axes)

• Use simple visualization: removes axes and shows only bars, ideal for minimalist dashboards or decorative graphs.

🔹 Y-axis Configuration

Value Customization

• Customized maximum and minimum: allows setting a specific range on the Y-axis.

• Maximum Value: defines the upper value of the axis.

• Show values with decimals: if activated, axis values can have decimals.

• Number of decimals: number of decimals to show (0, 1, 2, etc.).

Label Customization

• Number of intervals on the axis: divides the Y-axis into segments for easier reading.

• Label font size: scales the size of numbers on the axis.

• Label font color: customization of the color of axis labels.

Lines

• Show lines: activates horizontal reference lines (gridlines).

• Hide all lines: removes all lines from the chart.

• Line size: thickness of reference lines.

• Line color: defines the color of grid lines.

✅ Best Practices