react-apextree

React wrapper for ApexTree - a JavaScript library for creating organizational and hierarchical charts.

Installation

npm install react-apextree apextree

Note: apextree is a peer dependency and must be installed alongside react-apextree.

Basic Usage

import { ApexTreeChart } from "react-apextree";

const data = {
  id: "1",
  name: "CEO",
  children: [
    {
      id: "2",
      name: "CTO",
      children: [
        { id: "3", name: "Dev Lead" },
        { id: "4", name: "QA Lead" },
      ],
    },
    {
      id: "5",
      name: "CFO",
    },
  ],
};

function App() {
  return (
    <ApexTreeChart
      data={data}
      width={800}
      height={600}
      direction="top"
      nodeWidth={120}
      nodeHeight={80}
    />
  );
}

Using Imperative Methods

Access methods like changeLayout, collapse, expand, and fitScreen via ref:

import { useRef } from "react";
import { ApexTreeChart, ApexTreeRef } from "react-apextree";

function App() {
  const treeRef = useRef<ApexTreeRef>(null);

  const handleChangeLayout = () => {
    treeRef.current?.changeLayout("left");
  };

  const handleCollapse = (nodeId: string) => {
    treeRef.current?.collapse(nodeId);
  };

  const handleExpand = (nodeId: string) => {
    treeRef.current?.expand(nodeId);
  };

  const handleFitScreen = () => {
    treeRef.current?.fitScreen();
  };

  return (
    <div>
      <button onClick={handleChangeLayout}>Change Layout</button>
      <button onClick={handleFitScreen}>Fit Screen</button>

      <ApexTreeChart ref={treeRef} data={data} width={800} height={600} />
    </div>
  );
}

Custom Node Templates

<ApexTreeChart
  data={data}
  width={800}
  height={600}
  contentKey="data"
  nodeWidth={150}
  nodeHeight={100}
  nodeTemplate={(content) => `
    <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
      <img 
        src="${content.imageURL}" 
        style="width: 50px; height: 50px; border-radius: 50%;" 
      />
      <div style="font-weight: bold;">${content.name}</div>
    </div>
  `}
/>

Props

Prop	Type	Default	Description
data	NodeData	required	Tree data structure
width	number | string	400	Width of the container
height	number | string	400	Height of the container
direction	'top' | 'bottom' | 'left' | 'right'	'top'	Direction of tree growth
contentKey	string	'name'	Key for node content
siblingSpacing	number	50	Spacing between siblings
childrenSpacing	number	50	Spacing between parent and children
nodeWidth	number	50	Width of nodes
nodeHeight	number	30	Height of nodes
nodeTemplate	(content: unknown) => string	-	Custom HTML template for nodes
nodeStyle	string	-	CSS styles for nodes
nodeBGColor	string	'#FFFFFF'	Node background color
nodeBGColorHover	string	'#FFFFFF'	Node background color on hover
borderWidth	number	1	Node border width
borderStyle	string	'solid'	Node border style
borderRadius	string	'5px'	Node border radius
borderColor	string	'#BCBCBC'	Node border color
borderColorHover	string	'#5C6BC0'	Node border color on hover
edgeWidth	number	1	Edge line width
edgeColor	string	'#BCBCBC'	Edge line color
edgeColorHover	string	'#5C6BC0'	Edge line color on hover
fontSize	string	'14px'	Font size
fontFamily	string	-	Font family
fontWeight	string	'400'	Font weight
fontColor	string	'#000000'	Font color
highlightOnHover	boolean	true	Enable highlight on hover
enableToolbar	boolean	false	Show toolbar
enableExpandCollapse	boolean	false	Enable expand/collapse buttons
enableTooltip	boolean	false	Enable tooltips
tooltipTemplate	(content: unknown) => string	-	Custom tooltip template
groupLeafNodes	boolean	false	Stack leaf nodes
onNodeClick	(node: NodeData) => void	-	Node click handler
className	string	-	CSS class for container
style	CSSProperties	-	Inline styles for container
canvasStyle	string	-	CSS styles for canvas

Ref Methods

Method	Description
changeLayout(direction?)	Change tree direction
collapse(nodeId)	Collapse a node
expand(nodeId)	Expand a node
fitScreen()	Fit tree to screen
getGraph()	Get the underlying graph instance

Data Structure

interface NodeData<T = unknown> {
  id: string; // unique identifier
  name?: string; // display name (or use contentKey)
  data?: T; // custom data for templates
  options?: NodeOptions; // per-node styling
  children?: NodeData<T>[];
}

interface NodeOptions {
  nodeBGColor?: string;
  nodeBGColorHover?: string;
  borderColor?: string;
  borderColorHover?: string;
  fontSize?: string;
  fontFamily?: string;
  fontWeight?: string | number;
  fontColor?: string;
}

TypeScript Support

Full TypeScript support with exported types:

import type {
  ApexTreeProps,
  ApexTreeRef,
  NodeData,
  NodeOptions,
  TreeDirection,
  GraphInstance,
} from "react-apextree";

License

React-Apextree uses the same dual-license model as ApexCharts. See LICENSE for details.

• Free for individuals, non-profits, and small businesses (< $2M revenue)
• Commercial license required for larger organizations

Links

• ApexTree Documentation
• ApexCharts
• License Information

Development

Running the Demo

The package includes a demo app showcasing various features:

# clone the repo
git clone https://github.com/apexcharts/react-apextree.git
cd react-apextree

# install dependencies
npm install
cd demo && npm install && cd ..

# build the library
npm run build

# run the demo
npm run demo

Then open http://localhost:5173 to see the examples.

Available Scripts

• npm run build - Build the library
• npm run dev - Build in watch mode
• npm run typecheck - Run TypeScript type checking
• npm run demo - Run the demo app
• npm run demo:build - Build the demo app