Charts

const [hoveredIndex, setHoveredIndex] = useState(null);

const legendItems = data.map((d) => ({
  label: d.label,
  value: d.value,
  color: "var(--chart-1)",
}));

<FunnelChart
  color="var(--chart-1)"
  data={data}
  hoveredIndex={hoveredIndex}
  layers={3}
  onHoverChange={setHoveredIndex}
/>
<Legend
  hoveredIndex={hoveredIndex}
  items={legendItems}
  onHoverChange={setHoveredIndex}
>
  <LegendItemComponent>
    <LegendMarker />
    <LegendLabel />
  </LegendItemComponent>
</Legend>

const data: FunnelStage[] = [
  { 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" },
];

<FunnelChart
  color="var(--chart-1)"
  data={data}
  layers={3}
  orientation="vertical"
/>

<FunnelChart
  color="var(--chart-1)"
  data={data}
  edges="straight"
  grid={{ bands: false, lines: true }}
  layers={3}
  orientation="vertical"
/>

<FunnelChart
  color="var(--chart-1)"
  data={data}
  edges="straight"
  layers={3}
  orientation="horizontal"
/>

<FunnelChart
  data={[
    { label: "Awareness", value: 4100, color: "var(--chart-1)" },
    { label: "Interest", value: 2957, color: "var(--chart-2)" },
    { label: "Consideration", value: 1084, color: "var(--chart-3)" },
    { label: "Intent", value: 1038, color: "var(--chart-4)" },
    { label: "Purchase", value: 320, color: "var(--chart-5)" },
  ]}
  layers={3}
/>

<FunnelChart
  data={[
    {
      label: "Awareness",
      value: 4100,
      gradient: [
        { offset: "0%", color: "var(--chart-1)" },
        { offset: "100%", color: "var(--chart-2)" },
      ],
    },
    // ... more segments
  ]}
  layers={3}
/>

<FunnelChart
  color="var(--chart-3)"
  data={data}
  layers={3}
  renderPattern={(id, color) => (
    <PatternLines
      background={color}
      height={8}
      id={id}
      orientation={["diagonal"]}
      stroke="rgba(255,255,255,0.35)"
      strokeWidth={2}
      width={8}
    />
  )}
/>

<FunnelChart
  color="var(--chart-1)"
  data={data}
  labelAlign="center"
  labelLayout="grouped"
  labelOrientation="vertical"
  layers={3}
/>

<FunnelChart
  color="var(--chart-1)"
  data={data}
  grid
  layers={3}
/>