Core

Funnel Chart

A funnel chart visualizes a sequential process, helping users see how values decrease from one stage to the next.

Example

Usage

Features

  • Ideal for conversion and pipeline views.
  • Supports custom labels for each stage.
  • Uses the shared LibravelUI chart tooltip.
  • Can be colored from the default chart palette or per-stage overrides.
  • Keeps the chart surface consistent with the rest of the system.

Installation

Copy the shared chart utilities and the chart component you need into your project.

components/ui/core/charts/chart-shell.tsx
components/ui/core/charts/chart-tooltip.tsx
components/ui/core/charts/funnel-chart.tsx
npx libravelui@latest add funnel-chart

Anatomy

import { FunnelChart } from "@/components/ui/core/charts/funnel-chart";
<FunnelChart
  data={data}
  dataKey="value"
  nameKey="stage"
/>

Props

Loading types…

Edit on GitHub

Last updated on

Composed Chart

A composed chart combines areas, bars, and lines in one surface so related metrics can be compared without switching chart types.

Line Chart

A line chart shows how values change across a continuous axis and is well suited for trends, forecasts, and performance tracking.