OrganizationChart

Dendrogram

FlowGraph

When to Use

To show the hierarchical structure of a company or team, clarifying the relationships between positions and departments.

To display the distribution of employees by position and department.

For project management, clarifying team members and their responsibilities.

For dependency analysis in scenarios like equity penetration and upstream/downstream company relationships.

API

For general graph properties, refer to: General Graph Properties

OrganizationChart

Property	Description	Type	Default Value
data	The dataset	Data	-
labelField	Specifies the node label content - Select a field from the data, and the corresponding field value will be used as the node label - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label	string \| ((node: NodeData) => string)	Node ID
direction	Syntactic sugar for setting the arrangement direction of tree nodes. When `layout.rankdir` is set, it will take precedence	`vertical` \| `horizontal`	`vertical`
layout	Dagre layout configuration	Layout	-

Data

Graph data. If the expand-collapse behavior is enabled, make sure the children field is included in the data.

const graphData = {
  nodes: [
    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
    { id: '3', data: { label: 'Node 3' } },
    { id: '4', data: { label: 'Node 4' } },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

Dagre Hierarchical Layout. The configuration options are as follows:

For more details, refer to the Dagre Wiki.

Property	Description	Type	Default Value
`rankdir`	The direction of node arrangement. Options include `TB`, `BT`, `LR`, or `RL`, where T = Top, B = Bottom, L = Left, and R = Right.	string	`TB`
`align`	Node alignment mode. Options include `UL`, `UR`, `DL`, or `DR`, where U = Up, D = Down, L = Left, and R = Right.	string	`undefined`
`nodesep`	The horizontal spacing between nodes in the layout, in pixels.	number	`50`
`edgesep`	The horizontal spacing between edges in the layout, in pixels.	number	`10`
`ranksep`	The spacing between levels in the layout, in pixels.	number	`50`
`marginx`	The margin on the left and right sides of the graph, in pixels.	number	`0`
`marginy`	The margin on the top and bottom sides of the graph, in pixels.	number	`0`
`acyclicer`	If set to `greedy`, uses a greedy heuristic algorithm to find the feedback arc set of the graph. The feedback arc set consists of edges that can be removed to make the graph acyclic.	string	`undefined`
`ranker`	The algorithm used to assign ranks to nodes in the input graph. Possible values are `network-simplex`, `tight-tree`, or `longest-path`.	string	`network-simplex`

Ant Design Charts

OrganizationChart

When to Use

Examples

API