Orbit UI

Funnel Chart

PRO

Embudo de conversion con trapecios que unen etapa con etapa. Muestra la tasa de paso y la caida entre etapas, que es el dato que se busca y que un grafico de barras esconde.

npx orbitui-cli add funnel-chart

Embudo de conversión

3.82%0.4%

De visita a pago, últimos 30 días

Visitas48.200Registro18.400Activación9.100Prueba4.200Pago1.840
  • Visitas → Registro 38.2%
  • Registro → Activación 49.5%
  • Activación → Prueba 46.2%
  • Prueba → Pago 43.8%

Props

PropTipoDescripción
stages*FunnelStage[]—
heightnumber—
formatValue(value: number) => string—
showDropoffbooleanMuestra la caida porcentual entre etapas consecutivas.
classNamestring—
aria-label*string—

Qué instala

Archivo
components/orbit/charts/funnel-chart.tsx
Componentes
chart-core, cx
Paquetes npm
ninguno

A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.