Single Category
A basic funnel with one value per step. Bars narrow from top to bottom, centered horizontally. Hover to see step values and conversion percentages.
import { FunnelChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { step: "Awareness", value: 10000 }, { step: "Interest", value: 7500 }, { step: "Consideration", value: 5000 }, { step: "Intent", value: 3200 }, { step: "Evaluation", value: 1800 }, { step: "Purchase", value: 900 }, ], /* --- Process --- */ valueAccessor: "value", /* --- Other --- */ stepAccessor: "step" } export default () => { return <FunnelChart {...frameProps} /> }
Multi-Category (A/B Test)
With a categoryAccessor, each category mirrors around the center axis. This is useful for A/B test comparisons, where you want to see how control and treatment groups progress through the funnel side by side.
import { FunnelChart } from "semiotic" const frameProps = { /* --- Data --- */ data: [ { step: "Awareness", category: "control", value: 900 }, { step: "Awareness", category: "treatment", value: 1000 }, { step: "Interest", category: "control", value: 777 }, { step: "Interest", category: "treatment", value: 800 }, // ...more data ], /* --- Process --- */ valueAccessor: "value", categoryAccessor: "category", /* --- Customize --- */ colorBy: "category", showLegend: true, /* --- Other --- */ stepAccessor: "step" } export default () => { return <FunnelChart {...frameProps} /> }
Interactive: Category Switching
Toggle between 1, 2, and 4 categories to see how the funnel adapts. Multi-category funnels alternate categories on each side of the center axis.
Vertical Orientation (Bar Funnel)
Set orientation="vertical" to render funnel data as vertical bars with hatched dropoff stacking. Each bar shows the retained value as a solid fill and the dropoff from the previous step as a diagonal-hatch pattern. The first step is always 100% solid.
Vertical: Single Category
JSX
<FunnelChart data={data} stepAccessor="step" valueAccessor="value" orientation="vertical" width={600} height={400} tooltip />
Vertical: Multi-Category (Grouped Bars)
With categoryAccessor, each step shows grouped bars — one per category, each with its own retained + dropoff stack.
JSX
<FunnelChart data={data} stepAccessor="step" valueAccessor="value" categoryAccessor="category" colorBy="category" orientation="vertical" showLegend width={600} height={400} tooltip />
Interactive: Vertical Category Switching
Graduating to the Frame
When you need more control — custom canvas renderers, mixed chart types, or advanced interaction — graduate toStreamOrdinalFrame directly. EveryFunnelChart is a configured StreamOrdinalFrameunder the hood.
Chart (simple)
JSX
import { FunnelChart } from "semiotic" // Horizontal (default): trapezoid connectors <FunnelChart data={data} stepAccessor="step" valueAccessor="value" categoryAccessor="channel" colorBy="channel" showLegend /> // Vertical: bar chart with dropoff hatching <FunnelChart data={data} stepAccessor="step" valueAccessor="value" orientation="vertical" />
Frame (full control)
JSX
import { StreamOrdinalFrame } from "semiotic" // Horizontal funnel (chartType="funnel") <StreamOrdinalFrame data={data} oAccessor="step" rAccessor="value" chartType="funnel" stackBy="channel" projection="horizontal" pieceStyle={(d) => ({ fill: colorScale(d.channel) })} connectorOpacity={0.3} showLabels size={[600, 400]} margin={{ top: 10, bottom: 10, left: 10, right: 10 }} /> // Vertical bar-funnel (chartType="bar-funnel") <StreamOrdinalFrame data={data} oAccessor="step" rAccessor="value" chartType="bar-funnel" stackBy="channel" projection="vertical" pieceStyle={(d) => ({ fill: colorScale(d.channel) })} showLabels showAxes size={[600, 400]} margin={{ top: 40, bottom: 60, left: 60, right: 20 }} />
The key mappings: stepAccessor → oAccessor,valueAccessor → rAccessor,categoryAccessor → stackBy.Horizontal orientation uses chartType="funnel" withprojection="horizontal". Vertical useschartType="bar-funnel" withprojection="vertical". The bar-funnel chart type automatically computes dropoff bars and applies diagonal hatching.
Props
| Prop | Type | Required | Default | Description |
|---|
data | array | Yes | — | Array of data points. Each point should have a step name and numeric value. |
stepAccessor | string | function | — | "step" | Field name or function to access the funnel step/stage name. |
valueAccessor | string | function | — | "value" | Field name or function to access the numeric value per step. |
categoryAccessor | string | function | — | — | Field name or function for multi-category funnels. Horizontal: categories mirror around center axis. Vertical: categories render as grouped bars. |
colorBy | string | function | — | — | Field name or function to determine bar color per category. |
colorScheme | string | array | — | "category10" | Color scheme name or custom colors array. |
orientation | "horizontal" | "vertical" | — | "horizontal" | Horizontal (default): centered bars narrowing top-to-bottom with trapezoid connectors. Vertical: vertical bars with hatched dropoff stacking — solid = retained value, hatched = dropoff from previous step. |
connectorOpacity | number | — | 0.3 | Opacity of trapezoid connectors between funnel steps (0–1). Horizontal orientation only. |
showLabels | boolean | — | true | Show step name and value/percent labels on funnel bars. Labels are suppressed on bars narrower than 50px. |
enableHover | boolean | — | true | Enable hover tooltips on bars and connectors. |
showLegend | boolean | — | true (when colorBy set) | Show a legend. Defaults to true when colorBy is specified. |
tooltip | object | function | — | — | Tooltip configuration or render function. Default shows step name, value, and % of first step. |
annotations | array | — | — | Annotation objects to render on the chart. Supports widget, label, y-threshold, enclose, and other annotation types. |
width | number | — | 600 | Chart width in pixels. |
height | number | — | 400 | Chart height in pixels. |
margin | object | — | { top: 50, bottom: 15, left: 70, right: 40 } | Margin around the chart area. |
title | string | — | — | Chart title displayed at the top. |
frameProps | object | — | — | Additional StreamOrdinalFrame props for advanced customization. |