Funnel

@nivo/funnelexperimentalsvgisomorphic
svg

A funnel chart.

This component also provides a React hook which can be used in headless mode: useFunnel(), meaning that you can compute the chart but handle the rendering by yourself, this hook supports almost the same properties as the chart.

The responsive alternative of this component is ResponsiveFunnel.

Actions Logs
Start interacting with the chart to log actions
Base
Array<Datum>required
Chart data.
objectoptional
px
px
px
px
Chart margin.
stringoptionaldefault:'vertical'
Direction of the chart.
stringoptionaldefault:'smooth'
Part shape interpolation.
numberoptionaldefault:0
px
Spacing between parts
numberoptionaldefault:0.66
Blend shapes.
string | Functionoptional
open editor
Value format supporting d3-format notation, this formatted value will then be used for labels and tooltips.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
spectral
Defines how to compute parts color.
numberoptionaldefault:1
Part background opacity.
numberoptionaldefault:6
px
Width of part border.
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute border color.
numberoptionaldefault:0.66
Part border opacity.
Labels
booleanoptionaldefault:true
    Enable/disable labels. Use styles from theme.labels.text.
string | object | Functionoptionaldefault:{"theme":"background"}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute label color.
Separators
booleanoptionaldefault:true
    Enable/disable before separators. Separators inherit styles from theme.grid.line.
numberoptionaldefault:0
px
Length of the before separator lines. You should add margin for them to be visible if the value is greater than 0.
numberoptionaldefault:0
px
Offset from the parts for the before separator lines. You should add margin for them to be visible if the value is greater than 0.
booleanoptionaldefault:true
    Enable/disable after separators. Separators inherit styles from theme.grid.line.
numberoptionaldefault:0
px
Length of the after separator lines. You should add margin for them to be visible if the value is greater than 0.
numberoptionaldefault:0
px
Offset from the parts for the after separator lines. You should add margin for them to be visible if the value is greater than 0.
Customization
Array<string | Function>optionaldefault:['separators', 'parts', 'labels', 'annotations']
Defines the order of layers and add custom layers.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
numberoptionaldefault:0
px
Expand part size by this amount of pixels on each side when it's active
numberoptional
px
Override default border width when a part is active.
(part, event) => voidoptional
onMouseEnter handler.
(part, event) => voidoptional
onMouseMove handler.
(part, event) => voidoptional
onMouseLeave handler.
(part, event) => voidoptional
onClick handler.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
string | objectoptionaldefault:'default'
wobbly
Motion config for react-spring, either a preset or a custom configuration.