Options

Options: {
  a11y: A11yOptions,
    enabled: boolean,
    label: string,
  canvasStyle: string,
  childrenSpacing: number,
  containerClassName: string,
  contentKey: string,
  direction: TreeDirection,
  enableAnimation: boolean,
  enableToolbar: boolean,
  groupLeafNodes: boolean,
  height: number | string,
  highlightOnHover: boolean,
  siblingSpacing: number,
  viewPortHeight: number,
  viewPortWidth: number,
  width: number | string,
  edgeColor: string,
  edgeColorHover: string,
  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,
  expandCollapseButtonBGColor: string,
  expandCollapseButtonBorderColor: string,
  groupLeafNodesSpacing: number,
  nodeBGColor: string,
  nodeBGColorHover: string,
  nodeClassName: string,
  nodeHeight: number,
  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.

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

`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`