K
KoreUI

Waterfall

Chart

El puente entre un valor inicial y uno final: cada barra flota sobre la suma de las anteriores. Las etapas suben (verde) o bajan (rojo); las filas marcadas como «total» son descansillos neutros.

Uso básico

El saldo de apertura y el beneficio final son total (barras neutras que arrancan del cero); lo de en medio son saltos que suben (verde) o bajan (rojo). El beneficio se deja en 0 en el dato: se calcula solo. Los conectores enlazan el final de cada barra con el principio de la siguiente.

Cuenta de resultados por concepto
Categoría importe
Ingresos 128k
Coste de ventas -47k
Marketing -18,5k
Personal -31k
Otros ingresos 9,2k
Impuestos -12,4k
Beneficio 28,3k 
<x-kore::chart :data="$pyl" x="concepto" height="20rem" aria-label="Cuenta de resultados por concepto">
    <x-kore::chart.waterfall y="importe" total="total" />
    <x-kore::chart.axis-y :ticks="5" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$pyl" x="concepto" height="20rem" aria-label="Cuenta de resultados por concepto">
    <x-kore::chart.waterfall y="importe" total="total" />
    <x-kore::chart.axis-y :ticks="5" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Sin conectores

Lo mismo, pero mirando de dónde salió una desviación: del presupuesto al real, y por qué. Con :connectors='false' se apagan las líneas que enlazan una barra con la siguiente.

Varianza contra presupuesto
Categoría delta
Presupuesto 50k
Más pedidos 8,2k
Menos precio -3,1k
Devoluciones -1,8k
Real 53,3k 
<x-kore::chart :data="$varianza" x="motivo" height="16rem" aria-label="Varianza contra presupuesto">
    <x-kore::chart.waterfall y="delta" total="total" :connectors="false" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>
<x-kore::chart :data="$varianza" x="motivo" height="16rem" aria-label="Varianza contra presupuesto">
    <x-kore::chart.waterfall y="delta" total="total" :connectors="false" />
    <x-kore::chart.axis-y :ticks="4" format="compact" />
    <x-kore::chart.axis-x />
    <x-kore::chart.tooltip />
</x-kore::chart>

Totales calculados solos

La columna «total» es booleana: las filas ciertas son descansillos que van del cero al acumulado y no mueven la suma. Si dejas el importe vacío («0»), sale la suma de todo lo anterior — no hay que repetir la cuenta en el dato. Y si traes tú el valor (por ejemplo, el saldo de apertura), se usa ése, así el primer total no queda clavado en cero.

Fila de total, vacía 
['concepto' => 'Beneficio', 'importe' => 0, 'total' => true],
// 128000 - 47000 - 18500 - 31000 + 9200 - 12400 = 28300 → se calcula solo
['concepto' => 'Beneficio', 'importe' => 0, 'total' => true],
// 128000 - 47000 - 18500 - 31000 + 9200 - 12400 = 28300 → se calcula solo

Color: aquí es el único sitio del módulo donde una serie usa los tokens semánticos, y es legítimo: --kore-success significa «esto suma», que es exactamente lo que dice una barra que sube. No es pintar la serie 2 de verde por gusto.

No comparte gráfico: cada barra flota sobre la suma de las anteriores, así que superponerle una línea o unas barras normales mezclaría dos sistemas de coordenadas. Como el donut, vive sola — y si le pones otra marca, lanza una excepción.

Props

Prop Tipo Default Descripción
y string — La columna del salto de cada etapa
total string|null null La columna booleana que marca los totales
connectors bool true Las líneas que enlazan una barra con la siguiente
show bool true Apaga la marca
Cargando