Funnel

@nivo/funnelexperimental
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
Datum[]required

Chart data.

numberrequired

Chart width.

numberrequired

Chart height.

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
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Diverging: Spectral

Define chart's colors.

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.