TreeCanvas

@nivo/treeexperimentalhierarchytreecanvas
svgcanvas

A canvas alternative to the Tree component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions.

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.

'tree' | 'dendogram'optionaldefault:'dendogram'

Type of tree diagram.

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

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvas
objectoptional
px
px
px
px

Chart margin.

Style
Themeoptional

Define style for common elements such as labels, axes…

number | (node: IntermediateComputedNode) => numberoptionaldefault:12
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: Tableau 10

Defines the color of the nodes, statically or dynamically.

numberoptionaldefault:Infinity

Fix the node color past a certain depth, meaning descendant nodes are going to inherit the parent color defined at that depth. Use Infinity to disable.

'bump' | 'linear' | 'step' | 'step-before' | 'step-after'optionaldefault:'bump'
bump

Defines the type of curve to use to draw links.

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

Defines the thickness of the links, statically or dynamically.

number | (link: ComputedLink) => numberoptional
px

Defines the size of active links, statically or dynamically.

number | (link: ComputedLink) => numberoptional
px

Defines the thickness of inactive links, statically or dynamically.

InheritedColorConfig<IntermediateComputedLink>optionaldefault:{"from":"source.color","modifiers":[["opacity",0.4]]}
inheritthemecustom
inherited property
target.color
modifiers
opacity

Defines the color of the links.

Labels
booleanoptionaldefault:true
   

Show labels for nodes.

string | (node: ComputedNode) => stringoptionaldefault:'id'

Define what to use as a node label, if a string is provided it's used as a property path to access the value.

'outward' | 'inward' | 'layout' | 'layout-opposite'optionaldefault:'outward'
outward

Defines how to position the nodes labels.

booleanoptionaldefault:true
   

Automatically orient labels according to the selected layout.

numberoptionaldefault:Infinity
px

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

LabelComponentoptional

Override the default label component.

supportsvgcanvas
LabelCanvasRendereroptional

Override the default label canvas rendering.

supportsvgcanvas
Customization
('links' | 'nodes' | 'mesh' | CustomCanvasLayer)[]optionaldefault:['links', 'nodes', 'labels', 'mesh']

Defines the order of layers and add custom layers.

NodeComponentoptional

Override the default node component.

supportsvgcanvas
NodeCanvasRendereroptional

Override the default node canvas rendering.

supportsvgcanvas
LinkComponentoptional

Override the default link component.

supportsvgcanvas
LinkCanvasRendereroptional

Override the default link canvas rendering.

supportsvgcanvas
Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

booleanoptionaldefault:true

Use a voronoi mesh to detect mouse interactions. Always true for the canvas implementation

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

booleanoptional
   

Highlight active node ancestor links.

booleanoptional
   

Highlight active node descendant links.

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

'cursor' | 'fixed'optional

Define the tooltip positioning behavior.

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

Define the tooltip anchor.

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

onMouseEnter handler for links (useMesh must be false).

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

onMouseMove handler for links (useMesh must be false).

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

onMouseLeave handler for links (useMesh must be false).

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

onClick handler for links (useMesh must be false).

supportsvgcanvas
LinkTooltipoptional

Tooltip component for links (useMesh must be false).

supportsvgcanvas
'top' | 'right' | 'bottom' | 'left'optionaldefault:'top'

Define the tooltip anchor.

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

Recipes
Custom node renderingWith node tooltip