Options

Options: {
  a11y: A11yOptions,
    enabled: boolean,
    label: string,
  canvasStyle: string,
  childrenSpacing: number,
  containerClassName: string,
  contentKey: string,
  direction: TreeDirection,
  enableAnimation: boolean,
  enableBreadcrumb: boolean,
  enableExpandCollapseZoom: boolean,
  enableSearch: boolean,
  enableSelection: TreeSelectionMode,
  enableToolbar: boolean,
  enableZoomPan: boolean,
  groupLeafNodes: boolean,
  height: number | string,
  highlightOnHover: boolean,
  paddingX: number,
  paddingY: number,
  siblingSpacing: number,
  theme: TreeTheme,
  viewPortHeight: number,
  viewPortWidth: number,
  width: number | string,
  edgeColor: string,
  edgeColorHover: string,
  edgeColorMode: EdgeColorMode,
  edgeStyle: EdgeStyle,
  edgeWidth: number,
  fontColor: string,
  fontFamily: string,
  fontSize: string,
  fontWeight: string,
  borderColor: string,
  borderColorHover: string,
  borderRadius: string,
  borderStyle: string,
  borderWidth: number,
  collapseBadgeBGColor: string,
  collapseBadgeEnabled: boolean,
  collapseBadgeFontColor: string,
  collapseBadgeFontSize: string,
  collapseBadgeThreshold: number,
  enableExpandCollapse: boolean,
  expandCollapseOnNodeClick: boolean,
  expandCollapseButtonBGColor: string,
  expandCollapseButtonBorderColor: string,
  externalLabel: ExternalLabelOptions,
    align: 'center' | 'left' | 'right',
    enabled: boolean,
    fontColor: string,
    fontFamily: string,
    fontSize: string,
    fontWeight: string,
    offsetX: number,
    offsetY: number,
    rotation: number,
    verticalAlign: 'bottom' | 'middle' | 'top',
  groupLeafNodesSpacing: number,
  nodeBGColor: string,
  nodeBGColorHover: string,
  nodeClassName: string,
  nodeHeight: number,
  nodeShadow: string,
  nodeShadowHover: string,
  nodeStyle: string,
  nodeTemplate: Function,
  nodeWidth: number,
  onNodeClick: Function,
  enableTooltip: boolean,
  tooltipBGColor: string,
  tooltipBorderColor: string,
  tooltipFontColor: string,
  tooltipFontSize: string,
  tooltipId: string,
  tooltipMaxWidth: number | undefined,
  tooltipMinWidth: number,
  tooltipPadding: number,
  tooltipTemplate: Function,
  tooltipOffset: number,
}

Default: '100%'

Width of the canvas. Accepts a pixel number or CSS percentage string.

Default: 'auto'

Height of the canvas. Use 'auto' to size to content.

Default: 'top'

Controls the direction the tree grows from the root node.

Available Options:

top — root at the top, children flow downward (default)
bottom — root at the bottom, children flow upward
left — root on the left, children flow rightward
right — root on the right, children flow leftward

Default: 'name'

Key in the data object used as the node display label.

Default: 50

Horizontal distance between sibling nodes in pixels.

Default: 50

Vertical distance between a parent node and its children in pixels.

Default: true

Highlight the hovered node and its connecting edges.

Default: 'root'

CSS class name for the root SVG container element.

Default: ''

Arbitrary CSS injected onto the SVG root container element.

Default: false

Show the zoom/pan toolbar.

Default: true

Animate node expansion/collapse transitions.

Default: false

Stack leaf nodes vertically instead of spreading them horizontally.

Default: 800

Internal SVG viewport width in pixels.

Default: 600

Internal SVG viewport height in pixels.

Default: 50

Width of each node in pixels.

Default: 30

Height of each node in pixels.

Custom function returning an HTML string rendered inside each node.

nodeTemplate: (content) => {
  return `
    <div style='display:flex;justify-content:center;
      align-items:center;text-align:center;height:100%;'>
      ${content}
    </div>
  `;
}

Default: '#FFFFFF'

Default background color of nodes.

Default: '#FFFFFF'

Background color of nodes on hover.

Default: 'apextree-node'

CSS class name added to every node element.

Default: ''

Inline CSS string applied to each node element.

Callback fired when the user clicks a node. Receives the raw node data object.

onNodeClick: (node) => {
  console.log('Clicked:', node);
}

Default: 1

Border width of nodes in pixels.

Default: 'solid'

CSS border-style for nodes.

Default: '5px'

CSS border-radius for nodes.

Default: '#BCBCBC'

Border color of nodes in their default state.

Default: '#5C6BC0'

Border color of nodes on hover.

Default: true

Show expand/collapse buttons on nodes that have children.

Default: '#FFFFFF'

Background color of the expand/collapse button.

Default: '#BCBCBC'

Border color of the expand/collapse button.

Default: true

Show the collapse-count badge on collapsed nodes.

Default: '#5C6BC0'

Background color of the collapse-count badge.

Default: '#FFFFFF'

Font color of the collapse-count badge.

Default: '12px'

Font size of the collapse-count badge.

Default: 1

Minimum number of hidden children required before the badge appears.

Default: 10

Spacing between stacked leaf nodes when groupLeafNodes is true, in pixels.

Default: '#A1A1A1'

Color of the connecting lines between nodes.

Default: '#5C6BC0'

Color of connecting lines when highlighted on hover.

Default: 1

Stroke width of connecting lines in pixels.

Default: false

Show a tooltip on node hover.

Default: 'apextree-tooltip-container'

HTML id for the tooltip container element.

Custom function returning an HTML string for the tooltip content.

tooltipTemplate: (content) => {
  return `
    <div style='display:flex;justify-content:center;
      align-items:center;text-align:center;height:100%;'>
      ${content}
    </div>
  `;
}

Maximum width of the tooltip in pixels. undefined means unconstrained.

Default: 100

Minimum width of the tooltip in pixels.

Default: 8

Inner padding of the tooltip in pixels. Set to 0 when using a custom tooltipTemplate.

Default: 10

Distance between the tooltip and the cursor in pixels.

Default: '#FFFFFF'

Background color of the tooltip.

Default: '#BCBCBC'

Border color of the tooltip.

Default: '#000000'

Font color of tooltip text.

Default: '12px'

Font size of tooltip text.

Default: '#000000'

CSS color for node text.

Default: ''

CSS font-family for node text. Falls back to the page default when empty.

Default: '14px'

CSS font-size for node text.

Default: '400'

CSS font-weight for node text.

Built-in color theme preset for the chart.

Available values: 'light' | 'dark' | 'custom'

Use 'custom' to fully control colors via the individual color options.

Show a breadcrumb trail above the chart that tracks the currently focused node path.

Automatically zoom the viewport to fit the visible subtree when a node is expanded or collapsed.

Enable the built-in search bar that highlights matching nodes in the tree.

Enable node selection. Controls the selection mode.

Available values: 'single' | 'multi' | false

'single' — only one node can be selected at a time
'multi' — multiple nodes can be selected simultaneously
false — selection is disabled

Determines how connecting edge colors are resolved.

Available values: 'default' | 'node'

'default' — edges use edgeColor / edgeColorHover
'node' — edges inherit the color of the source node

Shape of the connecting lines between nodes.

Available values: 'curved' | 'orthogonal' | 'straight'

CSS box-shadow value applied to each node in its default state.

CSS box-shadow value applied to each node on hover.

Default: false

Toggle a node's expansion when its body is clicked, in addition to the dedicated +/- button. The cursor becomes a pointer on clickable nodes, and the toggle fires before onNodeClick so the user callback sees the post-toggle node state.

Available Options:

false (default)
true

Default: true

Allow mouse-wheel zoom and drag-to-pan on the canvas. Set to false to lock the viewport and hide the toolbar's zoom buttons.

Available Options:

true (default)
false

Default: 100

Horizontal padding around the rendered tree, in pixels. Adds breathing room between the leftmost/rightmost nodes (and any external labels that extend past them) and the SVG viewBox edge.

Default: 100

Vertical padding around the rendered tree, in pixels. Useful when leaf nodes have rotated externalLabel content that extends past the marker bounds.

Render the node's label as an SVG <text> element positioned outside the node bounds instead of inside the nodeTemplate. The node box still renders (background, border, border-radius), so pair with a small nodeWidth / nodeHeight and borderRadius: '50%' for a marker-style look with a floating label.

When externalLabel.enabled resolves to true for a node, the in-node template is suppressed for that node. Each field can also be set per-node via NestedNode.options.externalLabel, layered onto the global config.

Options.externalLabel.enabled

Default: false

Render the label outside the node bounds. When false, the in-node nodeTemplate is used as before.

Available Options:

false (default)
true

Options.externalLabel.align

Default: 'center'

Horizontal placement of the label relative to the node.

Available Options:

'center' (default) — label is centered on the node horizontally
'left' — label sits to the left of the node (text is right-anchored)
'right' — label sits to the right of the node (text is left-anchored)

Options.externalLabel.verticalAlign

Default: 'middle'

Vertical placement of the label relative to the node.

Available Options:

'middle' (default) — label is centered on the node vertically
'top' — label sits above the node (text is bottom-anchored)
'bottom' — label sits below the node (text is top-anchored)

Options.externalLabel.offsetX

Default: 0

Additional horizontal pixel offset applied after externalLabel.align.

Options.externalLabel.offsetY

Default: 0

Additional vertical pixel offset applied after externalLabel.verticalAlign.

Options.externalLabel.rotation

Default: 0

Rotation in degrees, applied around the label anchor. Use 90 for top-to-bottom vertical labels and -90 for bottom-to-top.

Options.externalLabel.fontColor

Override the global fontColor for the external label only.

Options.externalLabel.fontFamily

Override the global fontFamily for the external label only.

Options.externalLabel.fontSize

Override the global fontSize for the external label only.

Options.externalLabel.fontWeight

Override the global fontWeight for the external label only.

Options

Configuration Structure

#width

#height

#direction

#contentKey

#siblingSpacing

#childrenSpacing

#highlightOnHover

#containerClassName

#canvasStyle

#enableToolbar

#enableAnimation

#groupLeafNodes

#viewPortWidth

#viewPortHeight

#nodeWidth

#nodeHeight

#nodeTemplate

#nodeBGColor

#nodeBGColorHover

#nodeClassName

#nodeStyle

#onNodeClick

#borderWidth

#borderStyle

#borderRadius

#borderColor

#borderColorHover

#enableExpandCollapse

#expandCollapseButtonBGColor

#expandCollapseButtonBorderColor

#collapseBadgeEnabled

#collapseBadgeBGColor

#collapseBadgeFontColor

#collapseBadgeFontSize

#collapseBadgeThreshold

#groupLeafNodesSpacing

#edgeColor

#edgeColorHover

#edgeWidth

#enableTooltip

#tooltipId

#tooltipTemplate

#tooltipMaxWidth

#tooltipMinWidth

#tooltipPadding

#tooltipOffset

#tooltipBGColor

#tooltipBorderColor

#tooltipFontColor

#tooltipFontSize

#fontColor

#fontFamily

#fontSize

#fontWeight

#a11y

#enabled

#label

#theme

#enableBreadcrumb

#enableExpandCollapseZoom

#enableSearch

#enableSelection

#edgeColorMode

#edgeStyle

#nodeShadow

#nodeShadowHover

#expandCollapseOnNodeClick

#enableZoomPan

#paddingX

#paddingY

#externalLabel

#enabled

#align

#verticalAlign

#offsetX

#offsetY

#rotation

#fontColor

`width`

`height`

`direction`

`contentKey`

`siblingSpacing`

`childrenSpacing`

`highlightOnHover`

`containerClassName`

`canvasStyle`

`enableToolbar`

`enableAnimation`

`groupLeafNodes`

`viewPortWidth`

`viewPortHeight`

`nodeWidth`

`nodeHeight`

`nodeTemplate`

`nodeBGColor`

`nodeBGColorHover`

`nodeClassName`

`nodeStyle`

`onNodeClick`

`borderWidth`

`borderStyle`

`borderRadius`

`borderColor`

`borderColorHover`

`enableExpandCollapse`

`expandCollapseButtonBGColor`

`expandCollapseButtonBorderColor`

`collapseBadgeEnabled`

`collapseBadgeBGColor`

`collapseBadgeFontColor`

`collapseBadgeFontSize`

`collapseBadgeThreshold`

`groupLeafNodesSpacing`

`edgeColor`

`edgeColorHover`

`edgeWidth`

`enableTooltip`

`tooltipId`

`tooltipTemplate`

`tooltipMaxWidth`

`tooltipMinWidth`

`tooltipPadding`

`tooltipOffset`

`tooltipBGColor`

`tooltipBorderColor`

`tooltipFontColor`

`tooltipFontSize`

`fontColor`

`fontFamily`

`fontSize`

`fontWeight`

`a11y`

`enabled`

`label`

`theme`

`enableBreadcrumb`

`enableExpandCollapseZoom`

`enableSearch`

`enableSelection`

`edgeColorMode`

`edgeStyle`

`nodeShadow`

`nodeShadowHover`

`expandCollapseOnNodeClick`

`enableZoomPan`

`paddingX`

`paddingY`

`externalLabel`

`enabled`

`align`

`verticalAlign`

`offsetX`

`offsetY`

`rotation`

`fontColor`

`fontFamily`

`fontSize`