FunnelSteps

A funnel drawn as bars, with conversion rates.

Draws each funnel stage as a bar, with the first stage at full width, and optionally the conversion between stages. A light visualisation that doesn’t need ECharts.

export const client = "only";

import { FunnelSteps } from "@squadbase/vantage/components";

const data = [
  { label: "訪問", value: 12_400 },
  { label: "商品ページ", value: 6_820 },
  { label: "カート追加", value: 2_140 },
  { label: "購入", value: 861 },
];

export default function Example() {
  return (
    <FunnelSteps
      className="w-[30rem]"
      data={data}
      showConversion
      formatValue={(value) => value.toLocaleString("ja-JP")}
    />
  );
}

import { FunnelSteps, funnelStepsVariants } from "@squadbase/vantage/components";
import type { FunnelStep } from "@squadbase/vantage/components";

PropType

data?FunnelStep[]

The stages. **The first one is the full-width bar.**

TypeFunnelStep[]

showConversion?boolean

Show the conversion between stages.

Typeboolean

formatValue?(value: number) => string

Format the numbers; raw by default.

Type(value: number) => string

animate?boolean

Grow the bars on mount.

Typeboolean

size?"sm" | "md" | "lg"

Type"sm" | "md" | "lg"

Default"md"

direction?"vertical" | "horizontal"

Type"vertical" | "horizontal"

Default"vertical"

FunnelStep

interface FunnelStep {
  label: string;
  value: number;
  color?: string; // defaults to the theme's chart colours
  onClick?: () => void;
}

A stage with onClick becomes pressable — use it to drill into that stage’s breakdown.