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";
export default function FunnelChartDemo5() {
return (
<div className="mx-auto w-[60%] max-w-3xl">
<FunnelChart
data={[
{
label: "Awareness",
value: 4100,
gradient: [
{ offset: "0%", color: "var(--chart-1)" },
{ offset: "100%", color: "var(--chart-2)" },
],
},
{
label: "Interest",
value: 2957,
gradient: [
{ offset: "0%", color: "var(--chart-2)" },
{ offset: "100%", color: "var(--chart-3)" },
],
},
{
label: "Consideration",
value: 1084,
gradient: [
{ offset: "0%", color: "var(--chart-3)" },
{ offset: "100%", color: "var(--chart-4)" },
],
},
{
label: "Intent",
value: 1038,
gradient: [
{ offset: "0%", color: "var(--chart-4)" },
{ offset: "100%", color: "var(--chart-5)" },
],
},
{
label: "Purchase",
value: 320,
gradient: [
{ offset: "0%", color: "var(--chart-5)" },
{ offset: "100%", color: "var(--chart-1)" },
],
},
]}
layers={3}
/>
</div>
);
}