Data display
FunnelChart
Compares ordered conversion stages without inferred percentages.
← All chart guides · Framework setup · Native counterparts
01
See it and copy it
Framework example
Explore the live chart, then open its code for Astro, React, or Elements.
Activation funnel
People in the August acquisition cohort
Visited: 600. Signed up: 180. Activated: 96
- Visited600
- Signed up180
- Activated96
View chart data
| Category | Value |
|---|---|
| Visited | 600 |
| Signed up | 180 |
| Activated | 96 |
View FunnelChart code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { FunnelChart } from '@santi020k/lumen-astro'
const data = [
{ id: 'visited', label: 'Visited', value: 600 },
{ id: 'signed-up', label: 'Signed up', value: 180 },
{ id: 'activated', label: 'Activated', value: 96 }
]
---
<FunnelChart
aria-label="Activation funnel"
heading="Activation funnel"
description="People in the August acquisition cohort"
data={data}
/>import { FunnelChart } from '@santi020k/lumen-react'
const data = [
{ id: 'visited', label: 'Visited', value: 600 },
{ id: 'signed-up', label: 'Signed up', value: 180 },
{ id: 'activated', label: 'Activated', value: 96 }
]
export const Example = () => (
<>
<FunnelChart
aria-label="Activation funnel"
heading="Activation funnel"
description="People in the August acquisition cohort"
data={data}
/>
</>
)<lumen-funnel-chart
id="example-funnel-chart"
aria-label="Activation funnel"
heading="Activation funnel"
description="People in the August acquisition cohort"
></lumen-funnel-chart>
<!-- In a module processed by your bundler, after the chart markup. -->
<script type="module">
import { defineLumenElements, LumenFunnelChartElement } from '@santi020k/lumen-elements'
defineLumenElements(['FunnelChart'])
const chart = document.getElementById('example-funnel-chart')
if (chart instanceof LumenFunnelChartElement) {
chart.data = [
{ id: 'visited', label: 'Visited', value: 600 },
{ id: 'signed-up', label: 'Signed up', value: 180 },
{ id: 'activated', label: 'Activated', value: 96 }
]
}
</script>When to use FunnelChart
Use for an explicitly defined cohort progressing through signup, activation, checkout, or another ordered process.
- Stage widths share a scale based on the largest available value. Exact labels and the data disclosure let readers inspect the counts.
- Use the description to identify the cohort and whether observations can skip, repeat, or re-enter stages.
Prepare the data
import type { LumenFunnelDatum } from '@santi020k/lumen-core'
const data = [
{ id: 'visited', label: 'Visited', value: 600 },
{ id: 'signed-up', label: 'Signed up', value: 180 },
{ id: 'activated', label: 'Activated', value: 96 }
] satisfies readonly LumenFunnelDatum[]- Each stage needs a unique nonempty id, a label, and a finite nonnegative value or null. Stage order follows the input.
- Define the cohort, reporting period, and counting rules before rendering. Lumen does not calculate conversion rates or infer drop-off percentages.
- A null stage is unavailable and zero is a measured count. Negative counts and duplicate ids invalidate the dataset.
Avoid misleading comparisons
- A later stage may be larger because the component preserves your data. Do not describe the shape as conversion unless the underlying cohort supports that reading.
- Separate totals from different time windows do not automatically form a valid funnel.
02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add FunnelChartlumen add FunnelChartpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add FunnelChart --target reactlumen add FunnelChart --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add FunnelChart --target elementslumen add FunnelChart --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| data | readonly LumenFunnelDatum[] | required | Unique nonempty id and label with a nullable nonnegative finite value. Preserves input order. |
| formatValue, labels | Formatter and chart labels | String / English | Uses the same units for visible values and accessible data. |
| showTable | boolean | true | Shows exact stage values. Lumen does not infer conversion percentages. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |