Methods

An ApexTree instance is created with new ApexTree(element, options) and drawn with render(data). The render() call returns the internal Graph instance, which exposes the runtime API for layout, expand/collapse, selection, search, and export.

import { ApexTree } from 'apextree'

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  nodeWidth: 120,
  nodeHeight: 40,
})

const graph = tree.render(data)   // returns the Graph instance

Instance methods

render(data)

Builds the tree from a NestedNode root and returns the Graph instance. See Data Format for the node structure.

const graph = tree.render({
  id: 'ceo',
  name: 'Alice',
  children: [
    { id: 'vp1', name: 'Bob', children: [] },
    { id: 'vp2', name: 'Carol', children: [] },
  ],
})

Throws if the container element is not found. To redraw with new data, call tree.render(newData) again.

destroy()

Destroys the chart instance and cleans up its DOM resources. Call before removing the container, or in a framework unmount hook.

tree.destroy()

getInstanceId()

Returns the unique identifier for this chart instance.

ApexTree.setLicense(key)

Static method. Sets the global ApexCharts license key. Call once at app startup, before creating any instance. Without a valid license the chart renders with a watermark.

ApexTree.setLicense('YOUR_LICENSE_KEY')

See Setting the License for framework patterns.

Graph methods

All of the following are called on the Graph object returned by render() (also reachable as tree.graph).

Layout and navigation

Method	Description
expand(nodeId)	Expand a collapsed node to reveal its children
collapse(nodeId)	Collapse a node, hiding its descendants
changeLayout(direction?)	Re-lay out the tree in a new direction: 'top', 'bottom', 'left', 'right'
fitScreen()	Fit the entire tree within the viewport
zoom(zoomFactor)	Zoom by a numeric factor (e.g. 1.2 to zoom in, 0.8 to zoom out)
centerOnNode(nodeId)	Center the camera on a node, keeping the current zoom level
construct(data)	Rebuild the internal graph from new data (pair with render({ mode }))
render({ mode })	Re-draw. mode: 'initial', 'expand', 'collapse', or 'data-update'

const graph = tree.render(data)

graph.expand('vp1')
graph.collapse('vp2')
graph.changeLayout('left')
graph.fitScreen()
graph.zoom(1.2)
graph.centerOnNode('vp1')

Selection

Requires enableSelection to be 'single' or 'multi'. See the Selection guide.

Method	Description
getSelection()	Return the selected node ids in insertion order (empty when none/disabled)
setSelection(ids)	Replace the selection. In 'single' mode only the first id applies
clearSelection()	Clear the current selection
onSelectionChange(listener)	Register a listener called with the new id array on every change; pass null to unregister

graph.onSelectionChange((ids) => {
  console.log('Selected:', ids)
})

graph.setSelection(['vp1'])
const selected = graph.getSelection()
graph.clearSelection()

Search and traversal

See the Search and Breadcrumbs guide.

Method	Description
findNodesByQuery(query)	Return every node id whose resolved label contains query (case-insensitive)
setSearchHighlight(matchIds)	Highlight matches and their lineage to root; pass [] to clear
getNodeLabel(nodeId)	Resolve the display label for a node
getNodeMap()	Return the resolved node map for external traversal
getRootNodeId()	Return the root node id of the current tree

const matches = graph.findNodesByQuery('bob')
graph.setSearchHighlight(matches)
if (matches.length) graph.centerOnNode(matches[0])

Breadcrumb

Method	Description
setBreadcrumbHandler(handler)	Register a callback invoked with the node id on every node click; pass null to clear

graph.setBreadcrumbHandler((nodeId) => {
  console.log('Clicked:', nodeId)
})

Export

Method	Description
exportToSvg()	Export the current tree as an SVG file (triggers a download)

See the Zoom, Pan and Export guide.

Full example

import { ApexTree } from 'apextree'

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  nodeWidth: 140,
  nodeHeight: 50,
  enableSelection: 'multi',
  enableToolbar: true,
})

const graph = tree.render(data)

// wire external controls
document.getElementById('expand-all').onclick = () => graph.expand(graph.getRootNodeId())
document.getElementById('fit').onclick = () => graph.fitScreen()
document.getElementById('export').onclick = () => graph.exportToSvg()

graph.onSelectionChange((ids) => updatePanel(ids))

React

The React wrapper exposes a subset of the Graph API through a ref, plus getGraph() for the full instance:

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

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

  return (
    <div>
      <button onClick={() => ref.current?.changeLayout('left')}>Left</button>
      <button onClick={() => ref.current?.fitScreen()}>Fit</button>
      <button onClick={() => ref.current?.getGraph()?.exportToSvg()}>Export</button>
      <ApexTreeChart ref={ref} data={data} options={{ direction: 'top' }} />
    </div>
  )
}

The ApexTreeRef handle exposes changeLayout(), collapse(), expand(), fitScreen(), and getGraph() (which returns the full Graph instance for zoom, exportToSvg, selection, and search).