||

Funnel Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Stage-based funnel visuals built atop composable EvilCharts primitives

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/funnel-chart

Usage

The funnel chart is composible. <EvilFunnelChart> wraps a vertically laid out Recharts <BarChart> with custom trapezoid shapes per stage (stageKey) and measured values (valueKey). Compose <Grid />, <XAxis />, <YAxis />, <Stages />, <Tooltip />, <Legend /> as needed, and set optional backgroundVariant on the chart root — Recharts has no standalone funnel primitive, but every native chart prop can pass through chartProps alongside the underlying BarChart escape hatch documented below.

import {
  EvilFunnelChart,
  Stages,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
} from "@/components/evilcharts/charts/funnel-chart";
<EvilFunnelChart
  config={chartConfig}
  data={funnelRows}
  stageKey="stage"
  valueKey="amount"
  backgroundVariant="dots"
>
  <YAxis />
  <XAxis />
  <Stages isClickable glowingStages={["trials"]} />
  <Grid />
  <Tooltip />
  <Legend isClickable />
</EvilFunnelChart>

Interactive Selection

Add isClickable to <Stages /> (plus <Legend /> when you want swatches clickable) then listen on onSelectionChange ({ dataKey, value } | null). dataKey matches rows’ stageKey string:

<EvilFunnelChart
  config={chartConfig}
  data={funnelRows}
  stageKey="stage"
  valueKey="amount"
  onSelectionChange={(selection) => {
    if (selection) {
      console.log("Selected:", selection.dataKey, selection.value);
    } else {
      console.log("Deselected");
    }
  }}
>
  <YAxis />
  <XAxis />
  <Stages isClickable />
  <Legend isClickable />
  <Tooltip />
</EvilFunnelChart>

Loading State

isLoading='true'

Examples

Glowing Stages

glowing

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilFunnelChart

The root container wrapping a vertical <BarChart>. Holds stage metadata, synthesized loading rows when isLoading, max-value scaling shared by funnel shapes, and selection state surfaced to <Stages />/<Legend />.

PropTypeDefaultDescription
config*Record<string, ChartConfig[string]>–

Keys must correspond to serialized stageKey values (string) so gradients + legend labels resolve per funnel stage color stop.

data*TData[]–

Rows with stageKey + numeric valueKey fields typed as literals for inference (TData extends Record<string, unknown>).

stageKey*keyof TData & string–

Categorical funnel stage identifier surfaced on <YAxis /> ticks and gradients.

valueKey*keyof TData & string–

Numeric throughput used to scale each trapezoid width plus tooltip payload.

children*ReactNode–

<Grid />, <XAxis />, <YAxis />, <Stages />, <Tooltip />, <Legend />, plus optional root backgroundVariant, and escapes through forwarded Recharts props via chartProps.

classNamestring–

Additional wrapper classes forwarded to <ChartContainer />.

stageGapnumber6

Vertical gutter between stacked funnel polygons inside each category band.

backgroundVariantBackgroundVariant–

Draws <ChartBackground /> beneath the funnel (same pattern as bar and scatter charts).

defaultSelectedStagestring | nullnull

Pre-select matching stageKey string (null clears).

onSelectionChange(selection: { dataKey: string; value: number } | null) => void–

Fires when clickable legend / stage polygons toggle visibility focus.

isLoadingbooleanfalse

Swaps rendered rows with motion-shimmer placeholders while preserving axes + tooltip wiring.

loadingStagesnumber5

Count of synthesized placeholder polygons while isLoading is active.

chartPropsComponentProps<typeof BarChart>–

Native Recharts props forwarded to <BarChart /> — sizing, responsiveness, syncing, brushes, margins, anything outside data/layout defaults we already encode. Refer to Recharts BarChart; there is no dedicated funnel primitive, so this escape hatch doubles as funnel tuning.

Stages

Configuration slot mirrored by funnel renderer — determines whether polygons listen for clicks / glow defs.

PropTypeDefaultDescription
isClickablebooleanfalse

Enables polygon click toggling. Selection dimming applies whenever a stage is selected (legend, default, or click).

glowingStagesstring[][]

Names matching stageKey values emitting glow filters akin to EvilBars.

XAxis

Mirrors numeric scale even though EvilFunnel hides ticks by default to keep silhouette clean (hide forwarding Recharts semantics).

PropTypeDefaultDescription
hidebooleantrue

Default hides axis line / ticks consistent with EvilFunnels marketing aesthetic.

type"number" | ..."number"

Forwarded verbatim to <XAxis /> while loading states hide axes automatically.

…axisProps––

Every remaining Recharts XAxis prop is forwarded. Read the Recharts XAxis documentation for available props.

YAxis

Shows ordered funnel stages (category axis for vertical funnel layout).

PropTypeDefaultDescription
widthnumber96

Default tick gutter width accommodating stage labels before trapezoid math runs.

type"category" | ..."category"

Drives categorical placement for each funnel row (dataKey={stageKey} internally).

…axisProps––

Every remaining Recharts YAxis prop is forwarded. Read the Recharts YAxis documentation for available props.

Grid

Optional vertical-only dashed scaffolding for alignment reference.

PropTypeDefaultDescription
strokeDasharraystring"3 3"

Dash pattern forwarded to <CartesianGrid />.

…gridProps––

Horizontal lines stay disabled intentionally; remaining grid props forwarded. Read the Recharts CartesianGrid documentation for nuance.

Tooltip

Disables Cartesian cursor crosshair (cursor={false}) for cleaner funnel hovering.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Tooltip polish tier.

roundnesssm|md|lg|xl"lg"

Tooltip radius.

defaultIndexnumber–

Pre-highlights tooltip for a deterministic stage row while pointer idle.

Legend

Stage keyed legend syncing dimming + selection mirrored from <Stages />.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

Legend marker motifs.

alignleft|center|right"center"

Horizontal alignment.

verticalAligntop|middle|bottom"bottom"

Vertical stacking vs chart canvas.

isClickablebooleanfalse

Legend entries toggle shared selection; dimming follows selectedStage even when <Stages /> is not clickable.

Did you like the content?