FunnelChart

Live preview

Loading example…

Funnel and pyramid: stage widths follow the value, the outline stays continuous between stages, and the conversion rate between consecutive stages sits on the joint. Vertical or horizontal, adapts to narrow containers (labels shrink and truncate, tooltip carries the detail).

Import

import { FunnelChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/funnel-chart.

Usage

<FunnelChart
  title="Embudo de reservas del mes"
  stages={bookings}
  variant="funnel"
  orientation="vertical"
  tapered
  neck={0.72}
  showConversion
  tone="categorical"
  gap={4}
  valueFormat="integer"
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`description`	`string`
`stages` *	`readonly FunnelDatum[]`		Stages in order: widest first.
`variant`	`"funnel" \| "pyramid"`	`"funnel"`	`funnel` narrows towards the last stage; `pyramid` tapers it to a point with the first stage as the base.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`
`tapered`	`boolean`	`true`	Trapezoid stages that narrow into the next one (default); `false` draws straight bars of each stage’s own width.
`neck`	`number`	`0.72`	How far the last stage narrows, as a fraction of its width (funnel, tapered).
`showConversion`	`boolean`	`true`	Conversion % between consecutive stages.
`tone`	`"accent" \| "categorical"`	`"categorical"`	`categorical` colors each stage; `accent` fades one brand color.
`gap`	`number`	`4`	Space between stages, in pixels.
`height`	`number \| "fill"`
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`tooltip`	`boolean`	`true`
`loading`	`boolean`	`false`
`animate`	`boolean`	`true`
`labels`	`Partial<FunnelLabels>`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/funnel-chart/funnel-chart.tsx