About
A typed funnel chart component built on @antv/gpt-vis for visualizing progressive data reduction through sequential stages, like a sales or conversion funnel.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Funnel Chart to your project and fits it to your theme.
Code
How Funnel Chart is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Funnel } from "@/components/ui/funnel";
export default function FunnelDemo() {
return (
<div className="inline-block bg-background p-4 text-foreground">
<Funnel
config={{
data: [
{ category: "Visit", value: 1000 },
{ category: "Inquiry", value: 600 },
{ category: "Order", value: 300 },
{ category: "Purchase", value: 120 },
],
title: "Sales Funnel",
}}
theme="academy"
width={600}
height={400}
className="w-auto min-h-0"
/>
</div>
);
}
Dependencies
More by gpt-vis
View all
GPT-Vis
8
Column Chart
Pie Chart