Cascada apilada

Variaciones con partes dentro de cada paso.

Definición

La cascada apilada es un puente de un valor inicial a uno final en el que cada paso se parte en segmentos. Los conectores unen los acumulados totales, así que se sigue el puente como en una cascada normal, y a la vez se ve de qué está hecho cada tramo. Se usa para explicar la variación del EBITDA, de las ventas o del margen por línea de negocio.

Editar con tus datos SVG Spec JSON

Todo el crecimiento del EBITDA es precio: la ocupación vacacional ya resta 3,4 M€

Datos: x · series · value
Buena para: Explicar cómo se pasa de una cifra a otra y qué parte de cada paso aporta cada segmento.
Evítala cuando: Cuando el desglose dentro de cada paso no importa: los segmentos añaden tinta sin añadir mensaje.
Se lee bien: Entre 3 y 12 elementos; dibuja hasta 60
Datos que faltan: Se niega a dibujar y dice qué valor falta.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`x`	string	Paso no vacío, en orden de aparición. Una bandera opcional o un nombre de nivel por palabra completa lo clasifica; nunca su posición o magnitud.
`series`	string	Segmento no vacío que parte la barra, hasta 4 valores en orden estable. Las filas repetidas de un mismo paso/segmento se suman; todos sus flags deben coincidir.
`value`	number	Importe finito requerido del segmento. Los totales declarados se conservan si cuadran con los flujos dentro de la tolerancia; nunca se reescriben silenciosamente. Ausentes y desbordamientos fallan.

Tamaños

Ancha por necesidad

Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.

A menos de 480 px el motor se niega y explica por qué: el eje X no puede rotular sus 7 categorías: cada banda mide 39.3 px y «Efecto ocupación» pide 119.7. «Efecto precio (ADR)» y «Efecto ocupación» se abrevian las . En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada paso necesita enseñar sus partes?

Si basta con el importe de cada paso, una cascada simple se lee antes.

Sí: quédate con cascada apilada

No: usa Gráfico de cascada

¿Explicas cómo se pasa de un total a otro?

Si sólo quieres comparar la composición de cada periodo, sin acumulado, bastan las barras apiladas.

Sí: quédate con cascada apilada

No: usa Barras apiladas

¿El orden de los pasos forma parte del mensaje?

Si sólo importa qué partida pesa más, unas barras ordenadas lo dicen sin el recorrido.

Sí: quédate con cascada apilada

No: usa Gráfico de barras horizontales

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('stacked-waterfall');
spec.data.rows = misFilas; // x, series, value
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Qué pasa con un paso que suma por un lado y resta por otro?

Enseña sus partes por separado y rotula el neto, en vez de compensarlas antes de dibujar.

¿Puedo poner yo los totales?

Sí. Los totales declarados se conservan si cuadran con los pasos dentro de una tolerancia; nunca se reescriben en silencio.

¿Cuántos segmentos admite cada paso?

Hasta cuatro, en un orden estable. Las filas repetidas de un mismo paso y segmento se suman.

¿Qué hace si faltan datos?

Se niega a dibujar y dice qué valor falta.

¿Cómo se ve en el móvil?

A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.

Relacionadas

Otras formas de responder «partes de un todo»

Guía para elegir: partes de un todo →