OrgChart JS Community Edition Examples

Discover what you can build for free with OrgChart JS Community Edition. Every example on this page is fully compatible with the free Community Edition and includes source code, making it easy to learn, customize, and start building interactive organizational charts.

Best OrgChart

Edit in BALKAN Code

This example uses the Emily Template together with the highlightOnHover functionality to highlight a node and its parent hierarchy when you hover over it, making reporting relationships easier to understand.

Data in a List

Edit in BALKAN Code

This example shows how to use a <foreignObject> in a custom template using the template function definition. buttons

Colorful OrgChart

Edit in BALKAN Code

This example demonstrates how to dynamically define a template based on node data by assigning department-specific colors, while using tags and a hidden template to customize the chart layout.

Color Graded

Edit in BALKAN Code

This example demonstrates how to dynamically define a template based on node data by assigning level-specific colors, while using tags and a hidden template to customize the chart layout.

Advanced Expand / Collapse

Edit in BALKAN Code

This example shows how to create custom Expand / Collapse in a template. It adds buttons for collapsing and expanding children, parents, and sibling nodes on the left or right side of the chart.