Directions and Layouts

ApexTree can grow the hierarchy in any of four directions and connect nodes with three different edge shapes. Both are configurable at construction and the direction can be changed at runtime.

Growth direction

The direction option controls where the root sits and which way children flow.

direction	Root position	Children flow
'top' (default)	Top	Downward
'bottom'	Bottom	Upward
'left'	Left	Rightward
'right'	Right	Leftward

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'left',
})
tree.render(data)

Changing direction at runtime

Call changeLayout(direction) on the graph to re-lay out an already-rendered tree:

const graph = tree.render(data)

document.getElementById('btn-top').onclick    = () => graph.changeLayout('top')
document.getElementById('btn-left').onclick   = () => graph.changeLayout('left')
document.getElementById('btn-bottom').onclick = () => graph.changeLayout('bottom')
document.getElementById('btn-right').onclick  = () => graph.changeLayout('right')

The transition animates when enableAnimation is on (the default).

Edge styles

edgeStyle sets the shape of the connecting lines between parent and child.

edgeStyle	Shape
'orthogonal' (default)	Right-angle elbows with rounded corners — the classic org-chart look
'curved'	Smooth cubic Bézier from parent to child
'straight'	A direct line from parent anchor to child anchor

const tree = new ApexTree(el, {
  direction: 'top',
  edgeStyle: 'curved',
})
tree.render(data)

The 'curved' and 'straight' styles do not apply to the side-bracket connector drawn for grouped leaf nodes — that connector stays orthogonal to visually stack siblings.

Edge color

Option	Type	Default	Description
edgeColor	string	'#D0D5DD'	Color of the connecting lines
edgeColorHover	string	'#5C6BC0'	Color when highlighted on hover
edgeWidth	number	1	Stroke width in pixels
edgeColorMode	'default' | 'node'	'default'	How edge colors are resolved

edgeColorMode: 'node' makes each edge inherit the borderColor of the child node it connects into, so every branch matches its destination node's color:

const tree = new ApexTree(el, {
  edgeColorMode: 'node',   // edges match child node border colors
  edgeWidth: 2,
})
tree.render(data)

Node spacing

Option	Type	Default	Description
siblingSpacing	number	50	Horizontal distance between sibling nodes (px)
childrenSpacing	number	50	Distance between a parent and its children (px)

const tree = new ApexTree(el, {
  direction: 'top',
  siblingSpacing: 80,
  childrenSpacing: 60,
})
tree.render(data)

For horizontal directions ('left'/'right'), siblingSpacing still separates siblings and childrenSpacing still separates generations — the axes swap with the growth direction automatically.

Padding around the tree

paddingX and paddingY add breathing room between the outermost nodes and the SVG viewBox edge — useful when nodes have external labels that extend past their bounds:

const tree = new ApexTree(el, {
  paddingX: 120,
  paddingY: 120,
})

Complete example

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  edgeStyle: 'curved',
  edgeColorMode: 'node',
  edgeWidth: 2,
  siblingSpacing: 70,
  childrenSpacing: 60,
  nodeWidth: 160,
  nodeHeight: 60,
})
const graph = tree.render(data)

React example

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

export default function DirectionalTree() {
  const ref = useRef<ApexTreeRef>(null)
  const dirs: TreeDirection[] = ['top', 'right', 'bottom', 'left']

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
        {dirs.map((d) => (
          <button key={d} onClick={() => ref.current?.changeLayout(d)}>{d}</button>
        ))}
      </div>
      <ApexTreeChart
        ref={ref}
        data={data}
        options={{ direction: 'top', edgeStyle: 'curved', edgeColorMode: 'node' }}
      />
    </div>
  )
}