Component
FunnelChart
Stages narrowing from first to last, such as a conversion funnel.
import { FunnelChart } from '@loidolt/theme-charts';
Example
Funnel chart of 5 stages, from Quotes (420) to Shipped (214): 51% carried through.
| Name | Value | Share |
|---|---|---|
| Quotes | 420 | 30% |
| Proofs sent | 310 | 22.1% |
| Approved | 236 | 16.8% |
| Cut | 221 | 15.8% |
| Shipped | 214 | 15.3% |
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | SliceDatum[] | — | The stages, in order. |
tableLabels | { nameLabel?: string; valueLabel?: string; shareLabel?: string } | {} | Headings of the data table columns. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andFunnelOptions, forwarded to the root element.