API Reference

The All4One component is highly configurable through props.

Props

Prop	Type	Default	Description
data	JsonData	undefined	The organization chart data (nodes and optional edges).
layoutStyle	LayoutStyle	'default'	The layout style to use. See Layouts.
nodeTheme	NodeTheme	'default'	The visual theme of the nodes.
layoutDirection	LayoutDirection	'TB'	Direction of the hierarchy (TB, BT, LR, RL).
edgeType	EdgeStyle	'oval-edge'	Styling of the connection lines.
backgroundVariant	BackgroundVariant	'dots'	Background pattern (dots, lines, cross).
backgroundColor	string	undefined	Custom background color.
edgeAnimated	boolean	false	Whether to animate the edges (marching ants).
edgeColor	string	undefined	Custom color for edges.
nodeBorderWidth	number	2	Thickness of node borders.
collapsible	boolean	false	Enables expand/collapse functionality on nodes.

Types

LayoutStyle

• default: Standard hierarchical layout.
• grid: Arranges nodes in a grid format.
• treeLeftOffset: Tree layout with children offset to the left.
• treeRightOffset: Tree layout with children offset to the right.
• treeLeft: Compact tree layout aligned left.
• treeRight: Compact tree layout aligned right.

NodeTheme

• default: Clean, minimal design.
• modern: Bold colors and soft shadows.
• glass: Frosted glass effect (Glassmorphism).
• neon: High-contrast dark mode with glowing borders.
• corporate: Formal design suitable for enterprise environments.

EdgeStyle

• straight-edge: Direct lines between nodes.
• oval-edge: Smooth, rounded paths.
• curved-edge: Elegant Bézier curves.
• straight-edge-parent: Straight lines that align with the parent's side.
• oval-edge-parent: Rounded lines that align with the parent's side.