Components
Loading preview...
Here is Funnel Chart component
npx shadcn@latest add https://21st.dev/r/bklitai/funnel-chart"use client";
import { FunnelChart } from "@/components/ui/funnel-chart";
import { PatternLines } from "@/components/ui/funnel-chart";
const data = [
{ label: "Visitors", value: 12400, displayValue: "12.4k" },
{ label: "Leads", value: 6800, displayValue: "6.8k" },
{ label: "Qualified", value: 3200, displayValue: "3.2k" },
{ label: "Proposals", value: 1500, displayValue: "1.5k" },
{ label: "Closed", value: 620, displayValue: "620" },
];
export default function FunnelChartDemo6() {
return (
<div className="mx-auto w-[60%] max-w-3xl">
<FunnelChart
data={data}
color="var(--chart-3)"
layers={3}
renderPattern={(id, color) => (
<PatternLines
id={id}
height={8}
width={8}
stroke="rgba(255,255,255,0.35)"
strokeWidth={2}
orientation={["diagonal"]}
background={color}
/>
)}
/>
</div>
);
}