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'
left-to-right

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 | (node: IntermediateComputedNode) => numberoptionaldefault:16
px

Defines the size of the nodes, statically or dynamically.

OrdinalColorScaleConfig<IntermediateComputedNode>optionaldefault:{"scheme":"nivo"}
Categorical: Dark 2

Defines the color of the nodes, statically or dynamically.

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

Defines the thickness of the links, statically or dynamically.

InheritedColorConfig<IntermediateComputedLink>optionaldefault:'#555555'
inheritthemecustom
inherited property
source.color
modifiers
opacity

Defines the color of the links.

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.

NodeTooltipoptional

Tooltip component for nodes.

(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.

LinkTooltipoptional

Tooltip component 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.