Expand and Collapse

Nodes with children can be collapsed to hide their subtree and expanded to reveal it. ApexTree provides a dedicated button, an optional click-to-toggle mode, a collapse-count badge, and programmatic control.

Expand/collapse button

enableExpandCollapse (on by default) shows a +/- button on every node that has children:

const tree = new ApexTree(document.getElementById('chart'), {
  enableExpandCollapse: true,   // default
})
tree.render(data)

Style the button with:

Option	Type	Default	Description
expandCollapseButtonBGColor	string	'#FFFFFF'	Button background
expandCollapseButtonBorderColor	string	'#BCBCBC'	Button border

Click-to-toggle

expandCollapseOnNodeClick makes the entire node body toggle its expansion, in addition to the dedicated button. The cursor becomes a pointer on toggleable nodes:

const tree = new ApexTree(el, {
  expandCollapseOnNodeClick: true,
})
tree.render(data)

The toggle fires before onNodeClick, so your click callback sees the post-toggle state.

Collapse-count badge

When a node is collapsed, a badge shows how many children are hidden:

Option	Type	Default	Description
collapseBadgeEnabled	boolean	true	Show the badge on collapsed nodes
collapseBadgeThreshold	number	1	Minimum hidden children before the badge appears
collapseBadgeBGColor	string	'#5C6BC0'	Badge background
collapseBadgeFontColor	string	'#FFFFFF'	Badge text color
collapseBadgeFontSize	string	'12px'	Badge font size

const tree = new ApexTree(el, {
  collapseBadgeEnabled: true,
  collapseBadgeThreshold: 3,   // only show the badge when 3+ children are hidden
  collapseBadgeBGColor: '#F59E0B',
})

Programmatic expand/collapse

Call expand(nodeId) and collapse(nodeId) on the graph returned by render():

const graph = tree.render(data)

graph.collapse('vp2')    // hide vp2's subtree
graph.expand('vp2')      // reveal it again

Combine with getRootNodeId() to build expand-all / collapse-all controls, or with getNodeMap() to traverse and act on specific nodes.

Auto-zoom on toggle

enableExpandCollapseZoom (on by default) re-fits the viewBox to the visible nodes after each expand/collapse, smoothly animating to the tightest bounding box. Set it to false to keep the viewport fixed:

const tree = new ApexTree(el, {
  enableExpandCollapseZoom: false,   // don't auto-fit after toggling
})

Grouping leaf nodes

groupLeafNodes stacks leaf nodes vertically instead of spreading them horizontally — useful for wide trees with many terminal nodes:

const tree = new ApexTree(el, {
  groupLeafNodes: true,
  groupLeafNodesSpacing: 12,   // gap between stacked leaves (default: 10)
})
tree.render(data)

Grouped leaves are connected with an orthogonal side-bracket connector regardless of the global edgeStyle.

Animation

Expand and collapse transitions animate when enableAnimation is true (the default). New nodes fade/slide in on expand; the viewBox animates when enableExpandCollapseZoom is on. Set enableAnimation: false for instant toggles.

Complete example

const tree = new ApexTree(document.getElementById('chart'), {
  enableExpandCollapse: true,
  expandCollapseOnNodeClick: true,
  collapseBadgeEnabled: true,
  collapseBadgeThreshold: 1,
  enableExpandCollapseZoom: true,
  enableAnimation: true,
})

const graph = tree.render(data)

document.getElementById('collapse-all').onclick = () => {
  // collapse every direct child of the root
  const rootId = graph.getRootNodeId()
  const map = graph.getNodeMap()
  map[rootId].children.forEach((childId) => graph.collapse(childId))
}

React example

import { useRef } from 'react'
import { ApexTreeChart } from 'react-apextree'
import type { ApexTreeRef } from 'react-apextree'

export default function CollapsibleTree() {
  const ref = useRef<ApexTreeRef>(null)

  return (
    <div>
      <button onClick={() => ref.current?.collapse('vp2')}>Collapse vp2</button>
      <button onClick={() => ref.current?.expand('vp2')}>Expand vp2</button>
      <ApexTreeChart
        ref={ref}
        data={data}
        options={{ expandCollapseOnNodeClick: true, collapseBadgeThreshold: 2 }}
      />
    </div>
  )
}