K
KoreUI

Funnel

Chart

Cuánta gente sobrevive cada paso de un proceso. Cada etapa es un trapecio más estrecho que el anterior: el estrechamiento es la caída.

Uso básico

De 12.000 visitas a 620 compras. Al lado de cada etapa: cuántos son, qué porcentaje queda del primero (la conversión) y —en rojo— cuánto se pierde en ese paso. El orden de las filas es el orden del embudo: a diferencia de un eje temporal, un funnel no ordena por valor.

  • Visitas 12.000 100 %
  • Registros 4.800 40 % −60 %
  • Añaden al carrito 1.500 12.5 % −68.8 %
  • Pagan 620 5.2 % −58.7 %
Embudo de conversión
Categoría usuarios
Visitas 12.000
Registros 4.800
Añaden al carrito 1.500
Pagan 620 
<x-kore::chart :data="$conversion" x="etapa" height="18rem" aria-label="Embudo de conversión">
    <x-kore::chart.funnel y="usuarios" />
</x-kore::chart>
<x-kore::chart :data="$conversion" x="etapa" height="18rem" aria-label="Embudo de conversión">
    <x-kore::chart.funnel y="usuarios" />
</x-kore::chart>

Varias etapas, sin highlight

Otro proceso, otra forma. La rampa ordinal se reparte entre las etapas que haya: la primera clara, la última oscura. Este va con la interacción apagada (:highlight='false'): pasa el ratón por encima y no se resalta nada.

  • Candidaturas 340 100 %
  • Criba 120 35.3 % −64.7 %
  • Entrevista 45 13.2 % −62.5 %
  • Oferta 12 3.5 % −73.3 %
  • Contratados 8 2.4 % −33.3 %
Embudo de contratación
Categoría personas
Candidaturas 340
Criba 120
Entrevista 45
Oferta 12
Contratados 8 
<x-kore::chart :data="$contratacion" x="fase" height="18rem" aria-label="Embudo de contratación">
    <x-kore::chart.funnel y="personas" :highlight="false" />
</x-kore::chart>
<x-kore::chart :data="$contratacion" x="fase" height="18rem" aria-label="Embudo de contratación">
    <x-kore::chart.funnel y="personas" :highlight="false" />
</x-kore::chart>

Conversión y caída

Al lado de cada etapa van tres cosas.

  • Cuántos son — el valor de la fila.
  • La conversión — qué porcentaje queda del primero. De 12.000 a 620 es un 5,2 %.
  • La caída — cuánto se pierde en ese paso, en rojo. De 4.800 a 1.500 es un −68,8 %; no el −87,5 % acumulado. Es la conversión paso a paso, la que se acciona: dice en qué escalón se va la gente.

El resalte al pasar el ratón enciende el par (trapecio + fila de números) y apaga el resto. Es CSS puro (:has() sobre un data-stage común, como el donut): no hay JavaScript que montar. Se apaga por gráfico con :highlight="false", o para toda la app con kore-ui.chart.funnel_highlight.

Color ordinal, no categórico

Las etapas van en orden, y cambiar el orden cambia el significado. Por eso el color sale de la rampa ORDINAL (--kore-ord-*), no de la categórica: la categórica dice «estas cosas son distintas», la ordinal dice «estas cosas van en esta secuencia».

Y aquí el color no lleva el peso de la información —eso ya lo hace la geometría, el ancho del trapecio—: sólo dice «vas por aquí».

Props

Prop Tipo Default Descripción
y string — La columna del valor de cada etapa
highlight bool|null config(true) Resaltar la etapa y su fila al pasar el ratón
show bool true Apaga la marca
Cargando