Columnas apiladas

📌 ¿Qué son?

Los gráficos de Columnas Apiladas permiten representar múltiples series de datos por cada categoría en el eje X, visualizándolos de forma acumulativa. Es decir, las series se apilan una encima de la otra dentro de una misma columna, mostrando la suma acumulada y la contribución de cada serie al total.

🔍 Son ideales para mostrar composición o contribución relativa entre varias partes dentro de una misma categoría temporal o espacial (turnos, productos, áreas…).

Este ejemplo sirve para realizar un seguimiento de producción mensual por producto.

• Cada barra representa un mes.

• Cada categoría es un producto (A, B, C).

• Color por producto:

  • Producto A – Rosa

  • Producto B – Lila

  • Producto C – Morado

• Objetivo de producción total mensual: 400 unidades.

🎯 ¿Cuándo usarlas?

• Analizar la composición de un total por categorías.

• Mostrar distribución de un total por partes.

• Mejor para mostrar proporciones y tendencias.

• Mostrar evolución acumulativa a lo largo del tiempo.

📥 Formatos de Envío de Datos

▸ Desde dataset

Ejemplo de estructura:

Configuración en el panel:

• Label: Mes (etiquetas en el eje X)

• Label type: String (tipo de las etiquetas)

• Values: Producto A, Producto B, Producto C (categórias

• Popup: (cada segmento mostrará su valor, si se quieren visualizar más datos en cada segmento se seleccionan aquí)

▸ Desde 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]
}

🛠️ Configuración de la visualización

🔹 Estructura

• Nombre personalizado: puedes asignar un título como “Ventas 2024”.

• Ocultar nombre: si se desea una interfaz más limpia.

• Alineación: izquierda, centro o derecha.

• Tamaño del nombre: escala ajustable (ej. 0.7).

• Dimensiones: ancho y alto del bloque visual (ej. 24 x 8).

🔹 Leyenda y Animaciones

• Leyenda:

  • Ocultar/mostrar leyenda.

  • Tamaño del texto en la leyenda (ej. 0.6).

  • Número de columnas (ej. 3).

  • Centrar valores de la leyenda.

• Animaciones:

  • Activar animación al actualizar valores.

  • Duración de la animación (ej. 0.2 segundos).

🔹 Eje X

• Labels:

  • Tamaño del texto de las etiquetas del eje (ej. 0.3).

  • Color del texto.

  • Opción para mostrar labels inclinadas.

• Líneas:

  • Mostrar u ocultar todas las líneas de referencia.

  • Grosor (ej. 0.1) y color de las líneas.

🔹 Eje Y

• Rango personalizado:

  • Valor máximo (ej. 700) y mínimo.

  • Mostrar valores con decimales (ej. 2 decimales).

• Etiquetas del eje:

  • Número de intervalos (ej. 5).

  • Tamaño del texto (ej. 0.4).

  • Color del texto.

• Líneas:

  • Mostrar/ocultar líneas.

  • Grosor y color personalizable.

🔹 Configuración de Valores

• Asociación de cada subcategoría con un color (ej. Producto A, B, C).

• Posibilidad de mostrar el valor directamente sobre cada segmento de la barra.

• Tamaño del texto del valor (ej. 0.4).

• Color del texto.

• Ordenar valores por total: ordena las columnas en función de la suma total de sus segmentos.

✅ Buenas Prácticas