Dendogram

@nivo/dendogramhierarchy

Dendogram

Actions Logs
Start interacting with the chart to log actions
Base
objectrequired

The hierarchical data object.

string | Functionoptionaldefault:'id'

The key or function to use to retrieve nodes identity.

'top-to-bottom' | 'right-to-left' | 'bottom-to-top' | 'left-to-right'optionaldefault:'top-to-bottom'
top-to-bottom

Defines the diagram layout.

numberrequired

Chart width.

numberrequired

Chart height.

objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

number | (link: IntermediateComputedLink) => numberoptionaldefault:1
px

Defines the thickness of the links, statically or dynamically.

Customization
('links' | 'nodes' | 'labels' | CustomSvgLayer)[]optional

Defines the order of layers and add custom layers.

NodeComponentoptional

Override the default node component.

LinkComponentoptional

Override the default link component.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

(node: ComputedNode, event: MouseEvent) => voidoptional

onMouseEnter handler for nodes.

(node: ComputedNode, event: MouseEvent) => voidoptional

onMouseMove handler for nodes.

(node: ComputedNode, event: MouseEvent) => voidoptional

onMouseLeave handler for nodes.

(node: ComputedNode, event: MouseEvent) => voidoptional

onClick handler for nodes.

(node: ComputedNode, event: MouseEvent) => voidoptional

onClick handler.

(node: ComputedLink, event: MouseEvent) => voidoptional

onMouseEnter handler for links.

(node: ComputedLink, event: MouseEvent) => voidoptional

onMouseMove handler for links.

(node: ComputedLink, event: MouseEvent) => voidoptional

onMouseLeave handler for links.

(node: ComputedLink, event: MouseEvent) => voidoptional

onClick handler for links.

Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

string | objectoptionaldefault:'gentle'
gentle

Motion config for react-spring, either a preset or a custom configuration.