Gráfico de cascada

Cómo se pasa de un valor inicial a otro.

Definición

Un gráfico de cascada explica cómo se pasa de un valor inicial a uno final: cada barra intermedia flota sobre la anterior y sube o baja según su importe. Los extremos, y los subtotales que se marquen, son niveles; lo de en medio, movimientos. Se usa para puentes de resultados, presupuestos o variaciones de caja.

Editar con tus datos SVG Spec JSON

Los 2,2 M$ de EBITDA que ganamos son precio: el volumen aporta 1,0 y el coste unitario se lleva 1,9

Datos: label · value · order
Buena para: Explicar qué partidas, y en qué orden, llevan de una cifra a otra.
Evítala cuando: Cuando los pasos no tienen un orden natural o no hay un nivel de partida y otro de llegada.
Se lee bien: Entre 3 y 15 elementos; dibuja hasta 300
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é
`label` · opcional	string	Etiqueta no vacía y distinta de cada paso ordenado. columns.label (o su alias columns.x) manda sobre la inferencia. Duplicados dentro de un frame fallan.
`value` · opcional	number	Importe finito con signo del flujo, o nivel absoluto si es total. columns.value manda; los niveles declarados deben cuadrar con los flujos intermedios. Ausentes conservan zero-fill; valores presentes inválidos fallan.
`order` · opcional	string	Bandera opcional de nivel, no orden numérico. columns.order selecciona su columna exacta. Admite sí/no, true/false, 1/0 y nombres de tipo documentados, normalizando espacios y acentos. Valores presentes desconocidos fallan; omitidos en una columna existente significan flujo. Sin columna se usan nombres de nivel por palabra completa; Internet Ads y Partida de personal son flujos.

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.

Móvil · 468 × 669 px

Escritorio · 1248 × 930 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Importa el orden de los tramos?

Si sólo quieres comparar cuánto suma o resta cada partida, unas barras medidas desde el cero lo enseñan sin encadenar.

Sí: quédate con gráfico de cascada

No: usa Gráfico de barras horizontales

¿Cada tramo es un único importe?

Si cada paso tiene a su vez varias partes, la cascada apilada enseña la composición.

Sí: quédate con gráfico de cascada

No: usa Cascada apilada

¿Los pasos son movimientos y no niveles sucesivos?

Si lo que tienes es el valor en cada fecha, una línea enseña su evolución.

Sí: quédate con gráfico de cascada

No: usa Gráfico de líneas

Código

La misma pieza, con tus datos

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

const spec = await getPreset('waterfall');
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

¿Cómo marco qué barras son totales?

Con una columna que diga sí o no a cada paso, o con nombres de nivel como «Total» en la etiqueta. Lo que no se marque se trata como movimiento.

¿Tienen que cuadrar los totales?

Sí: los niveles que declares deben coincidir con la suma de los movimientos intermedios.

¿Admite valores negativos?

Sí. Cada movimiento lleva su signo: positivo sube y negativo baja.

¿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»

Guía para elegir: partes de un todo →