Funnel Chart

Dashboards 88

About

Here is Funnel Chart component

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

"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>
  );
}