Dendogram

@nivo/dendogramhierarchyexperimental

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.

number | (node: ComputedNode) => numberoptional
px

Defines the size of active nodes, statically or dynamically.

number | (node: ComputedNode) => numberoptional
px

Defines the size of inactive 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:{"from":"source.color","modifiers":[["opacity",0.3]]}
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.

booleanoptionaldefault:true
   

Use a voronoi mesh to detect mouse interactions.

numberoptionaldefault:Infinity
px

Prevent nodes from being detected if the cursor is too far away from the node.

booleanoptionaldefault:false
   

Display mesh used to detect mouse interactions (voronoi cells).

booleanoptional
   

Highlight active node ancestor nodes.

booleanoptional
   

Highlight active node descendant nodes.

(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 (useMesh must be false).

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

onMouseMove handler for links (useMesh must be false).

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

onMouseLeave handler for links (useMesh must be false).

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

onClick handler for links (useMesh must be false).

LinkTooltipoptional

Tooltip component for links (useMesh must be false).

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'
stiff

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