Charts

Funnel Chart

Stage drop-off. Default and Motion variants.

Examples

Default

Cronus stage drop-off from visit to retain.

tsx

<FunnelChart data={[{ stage: "Visit", value: 8400, key: "visit" }]} />

Motion

Stage funnel with hover labels.

tsx

import { FunnelChart } from "@cronus-ui/ui/charts";

<FunnelChart data={[{ label: "Visitors", value: 12000 }]} />

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add funnel-chart

tsx

import { FunnelChart } from "@cronus-ui/ui";

Usage

tsx

import { FunnelChart } from "@cronus-ui/ui/charts";

<FunnelChart
  data={stages}
  color="var(--chart-1)"
  layers={3}
  showPercentage
  showValues
  showLabels
/>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

FunnelChart

Stage drop-off with halo layers, hover, optional patterns, and a banded grid.

Prop	Type	Default	Description
`data`*	`FunnelStage[]`	—	label, value, optional displayValue / color / gradient.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout.
`color`	`string`	`var(--chart-1)`	Default segment color.
`layers`	`number`	`3`	Halo rings behind the innermost fill.
`gap`	`number`	`4`	Gap between segments in px.
`edges`	`"curved" \| "straight"`	`"curved"`	Segment edge style.
`showPercentage`	`boolean`	`true`	Show conversion %.
`showValues`	`boolean`	`true`	Show values.
`hoveredIndex`	`number \| null`	—	Controlled hover.
`renderPattern`	`(id, color) => ReactNode`	—	visx pattern per segment.
`grid`	`boolean \| GridConfig`	—	Banded background + gap lines.

Layers, edges, patterns

layers draws concentric halos. edges="straight" is a trapezoid. renderPattern fills the innermost ring with a visx pattern while halos stay solid.

tsx

<FunnelChart
  data={stages}
  layers={3}
  edges="curved"
  labelLayout="grouped"
  renderPattern={(id, color) => (
    <PatternLines id={id} height={6} width={6} stroke={color} strokeWidth={1} orientation={["diagonal"]} />
  )}
/>

Data format

type FunnelStage = {
  label: string;
  value: number;
  displayValue?: string;
  color?: string;
  gradient?: { offset: string | number; color: string }[];
};

const stages: FunnelStage[] = [
  { label: "Visit", value: 10000, displayValue: "10k" },
  { label: "Signup", value: 4200, displayValue: "4.2k" },
  { label: "Paid", value: 980, displayValue: "980" },
];

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add motion @visx/pattern

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

FunnelChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`FunnelChartItem[]`	—	—