Grouped columns

📌 What are they?

The Grouped Columns or Bars allow representing more than one data series for each main category, placing the bars next to each other instead of stacking them. This type of visualization makes it easier to compare multiple variables simultaneously within the same category.

🔍 It is useful when you want to observe the relative behavior among different groups in parallel (for example, sales by region and by product, or consumption by shift and by plant).

This example serves to track monthly production by product.

• Each bar represents a month.

• Each category is a product (A, B, C).

• Color by product:

  • Product A – Pink

  • Product B – Lilac

  • Product C – Purple

• Total monthly production target: 400 units.

🎯 When to use them?

• Compare multiple metrics within the same category.

• Evaluate different indicators in parallel over time.

• Show comparisons between homogeneous groups (teams, phases, lines, etc.).

• Identify patterns or differences in similar series.

📥 Data Submission Formats

▸ From dataset

Example structure:

Configuration on the panel:

• Label: Month (labels on the X-axis)

• Label type: String (type of the labels)

• Values: Product A, Product B, Product C (categories)

• Popup: (each segment will show its value, if you want to visualize more data in each segment it is selected here)

▸ From MQTT

{
  "Enero": [100, 150, 130],
  "Febrero": [110, 160, 120],
  "Marzo": [90, 140, 150],
  "Abril": [120, 170, 120],
  "Mayo": [110, 150, 140],
  "Junio": [115, 155, 135],
  "Julio": [105, 165, 145],
  "Agosto": [125, 160, 130],
  "Septiembre": [100, 150, 140],
  "Octubre": [120, 155, 125],
  "Noviembre": [110, 145, 135],
  "Diciembre": [130, 165, 140]
}

🛠️ Visualization Configuration

🔹 Structure

• Custom name: you can assign a title like “Sales 2024”.

• Hide name: if a cleaner interface is desired.

• Alignment: left, center or right.

• Name size: adjustable scale (e.g. 0.7).

• Dimensions: width and height of the visual block (e.g. 24 x 8).

🔹 Legend and Animations

• Legend:

  • Hide/show legend.

  • Text size in the legend (e.g. 0.6).

  • Number of columns (e.g. 3).

  • Center legend values.

• Animations:

  • Activate animation when updating values.

  • Animation duration (e.g. 0.2 seconds).

🔹 X Axis

• Labels:

  • Text size of the axis labels (e.g. 0.3).

  • Text color.

  • Option to show tilted labels.

• Lines:

  • Show or hide all reference lines.

  • Thickness (e.g. 0.1) and color of the lines.

🔹 Y Axis

• Custom range:

  • Maximum value (e.g. 700) and minimum.

  • Show values with decimals (e.g. 2 decimals).

• Axis labels:

  • Number of intervals (e.g. 5).

  • Text size (e.g. 0.4).

  • Text color.

• Lines:

  • Show/hide lines.

  • Customizable thickness and color.

🔹 Values Configuration

• Assigning colors to each variable (e.g. Product A: blue, Product B: yellow, Product C: violet).

• Fields directly linked by name to the received data.

🔹 Grouped Configuration

• Value above the column: activates the visualization of the number directly above each bar.

• Font size of the value: allows adjusting the visibility of the displayed data (e.g. 0.4).

• Text color of the value: free selection to ensure contrast and readability.

✅ Best Practices