Dendogram

@nivo/dendogramhierarchyexperimental

Nivo dendogram graph.

For now this component doesn't support labels, but that's something you could do using a custom layer.

While it's part of the nivo internals, and not formally documented, you could use the useDendogram hook directly in order to build a fully custom component, this hook takes a config object which is very close to the component's props.

Start interacting with the chart to log actions

Base

dataobjectrequired

The hierarchical data object.

identitystring | Functionoptionaldefault:'id'

The key or function to use to retrieve nodes identity.

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

left-to-right

Defines the diagram layout.

widthnumberrequired

Chart width.

heightnumberrequired

Chart height.

marginobjectoptional

top

right

bottom

left

Chart margin.

Style

themeThemeoptional

Define style for common elements such as labels, axes…

nodeSizenumber | (node: IntermediateComputedNode) => numberoptionaldefault:16

Defines the size of the nodes, statically or dynamically.

activeNodeSizenumber | (node: ComputedNode) => numberoptional

Defines the size of active nodes, statically or dynamically.

inactiveNodeSizenumber | (node: ComputedNode) => numberoptional

Defines the size of inactive nodes, statically or dynamically.

nodeColorOrdinalColorScaleConfig<IntermediateComputedNode>optionaldefault:{"scheme":"nivo"}

Categorical: Dark 2

Defines the color of the nodes, statically or dynamically.

linkThicknessnumber | (link: IntermediateComputedLink) => numberoptionaldefault:1

Defines the thickness of the links, statically or dynamically.

activeLinkThicknessnumber | (link: ComputedLink) => numberoptional

Defines the size of active links, statically or dynamically.

inactiveLinkThicknessnumber | (link: ComputedLink) => numberoptional

Defines the thickness of inactive links, statically or dynamically.

linkColorInheritedColorConfig<IntermediateComputedLink>optionaldefault:{"from":"source.color","modifiers":[["opacity",0.3]]}

inheritthemecustom

inherited property

source.color

modifiers

opacity

Defines the color of the links.

Customization

layers('links' | 'nodes' | 'mesh' | CustomSvgLayer)[]optionaldefault:['links', 'nodes', 'mesh']

Defines the order of layers and add custom layers.

nodeComponentNodeComponentoptional

Override the default node component.

linkComponentLinkComponentoptional

Override the default link component.

Interactivity

isInteractivebooleanoptionaldefault:true

Enable/disable interactivity.

useMeshbooleanoptionaldefault:true

Use a voronoi mesh to detect mouse interactions.

meshDetectionThresholdnumberoptionaldefault:Infinity

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

debugMeshbooleanoptionaldefault:false

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

highlightAncestorNodesbooleanoptional

Highlight active node ancestor nodes.

highlightDescendantNodesbooleanoptional

Highlight active node descendant nodes.

highlightAncestorLinksbooleanoptional

Highlight active node ancestor links.

highlightDescendantLinksbooleanoptional

Highlight active node descendant links.

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

onMouseEnter handler for nodes.

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

onMouseMove handler for nodes.

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

onMouseLeave handler for nodes.

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

onClick handler for nodes.

nodeTooltipNodeTooltipoptional

Tooltip component for nodes.

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

onMouseEnter handler for links (useMesh must be false).

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

onMouseMove handler for links (useMesh must be false).

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

onMouseLeave handler for links (useMesh must be false).

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

onClick handler for links (useMesh must be false).

linkTooltipLinkTooltipoptional

Tooltip component for links (useMesh must be false).

Accessibility

rolestringoptional

Main element role attribute.

ariaLabelstringoptional

Main element aria-label.

ariaLabelledBystringoptional

Main element aria-labelledby.

ariaDescribedBystringoptional

Main element aria-describedby.

Motion

animatebooleanoptionaldefault:true

Enable/disable transitions.

motionConfigstring | objectoptionaldefault:'gentle'

presetcustom

stiff

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