Barras apiladas
Total y composición por categoría.
Definición
Las barras apiladas ponen una barra por categoría o periodo y la parten en segmentos, uno por componente. La altura total compara categorías y los segmentos enseñan de qué está hecha cada una. Se usa para ventas por línea de producto, gasto por partida o plantilla por área.
- Datos
- x · series
- Buena para
- Comparar totales entre categorías y ver qué componente aporta cada parte.
- Evítala cuando
- Cuando hay que comparar un componente que no está en la base: sus segmentos no arrancan a la misma altura.
- Se lee bien
- Entre 2 y 12 elementos; dibuja hasta 20
- Datos que faltan
- Dibuja el valor ausente como cero.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
x · opcional | string | columns.x (aliases category/label) selecciona el campo exacto de cada pila. Sin binding se infiere por nombre o primera columna de texto; sin ella falla. Una categoría numérica declarada se muestra como rótulo. |
series · opcional | number | columns.series (aliases value/y) selecciona UNA medida exacta. Sin binding se infieren de 1 a 4 columnas numéricas por orden; más de cuatro falla. Total/suma se excluyen salvo selección explícita como única medida. La unión fija leyenda, colores y campos entre frames. Valores presentes no finitos fallan; percent rechaza negativos, incluso en la unión. |
Tamaños
Recompuesta, no encogida
El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.
Cuándo usarla
Tres preguntas antes de elegirla
¿Te interesa la composición además del total?
Si sólo importa el total de cada categoría, unas barras simples se leen mejor.
Sí: quédate con barras apiladas
No: usa Gráfico de barras verticales
¿Basta con comparar los totales y la capa de abajo?
Si hay que comparar cada componente entre categorías, las barras agrupadas los ponen sobre la misma base.
Sí: quédate con barras apiladas
No: usa Barras agrupadas
¿Son pocas categorías o periodos sueltos, no una serie larga?
Con muchos instantes seguidos, las áreas apiladas siguen mejor la evolución.
Sí: quédate con barras apiladas
No: usa Áreas apiladas
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('stackedbar');
spec.data.rows = misFilas; // tus columnas
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué pasa con los valores negativos?
En modo absoluto se apilan por debajo del cero y los positivos por encima. La longitud conjunta de la barra no es el total neto.
¿Cuántos componentes admite?
Sin indicarlas, toma de una a cuatro columnas numéricas por orden; con más de cuatro falla. Las columnas de total o suma se excluyen.
¿Puede mostrar porcentajes?
Sí, en modo porcentual cada barra suma cien. Ese modo no admite valores negativos.
¿Qué hace si faltan datos?
Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.
¿Cómo se ve en el móvil?
El motor la recompone a 420 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.
Relacionadas
Otras formas de responder «partes de un todo»
Fuentes y usosde dónde viene y a dónde va el dinero
Anidamiento conceptualconceptos contenidos unos dentro de otros
Gráfico de anilloreparto de un total en pocas partes
Matriz de puntosresultados de casos individuales en cuadrícula
Descomposición DuPontdescomponer el ROE en sus factores
Gráfico de carámbanosjerarquía y pesos en bloques por niveles