OrgChart JS Community Edition Examples

Discover what you can build 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 build interactive organizational charts for free.

Color Coded Departments With Elevated Hover Effect

Edit in BALKAN Code

This example demonstrates how to dynamically define a template with initials and Links based on node data by assigning department-specific colors, using tags.

Bottom Orientation Color Coded

Edit in BALKAN Code

This example demonstrates how to dynamically define a template with level colors and add Node elevated hover effect

Left Orientation Color Coded

Edit in BALKAN Code

This example demonstrates how to dynamically define a template with level colors and add Node elevated hover effect

School Chart

Edit in BALKAN Code

This example demonstrates how to dynamically define a template with level colors and add Node elevated hover effect

Fit on Plus/Munis click with Top Orienttaion

Edit in BALKAN Code

This example demonstrates how to customize +/- and fit on +/- click

Fit on Plus/Munis click with Top Orienttaion and Left Border

Edit in BALKAN Code

This example demonstrates how to add a left border.

AI Tech

Edit in BALKAN Code

This example demonstrates how to customize +/- and fit on +/- click

Could Services

Edit in BALKAN Code

Colorfull Could Services Chart

Highlight Nodes by Titles

Edit in BALKAN Code

Custom highlight/filter implementation.

Color Graded Teams with zoon in and zoom out buttons

Edit in BALKAN Code

Custom highlight/filter implementation.

Technology Landscape

Edit in BALKAN Code

Uses multiple templates, tags, and a custom node layout.

Performance Overview

Edit in BALKAN Code

This example uses dynamic node definition to set the colors based on the node data values.

Sales

Edit in BALKAN Code

This example uses dynamic node definition to visualize data values.

Sparkline

Edit in BALKAN Code

This example uses dynamic node definition to visualize sales with a sparkline.

Select and Compare

Edit in BALKAN Code

This example uses additional HTML elements outside the chart to display and compare information from selected nodes.

Pictogram Infographic

Edit in BALKAN Code

EU Car Sales by Powertrain (2022–2025)

Tooltip

Hover to show the tooltip

Edit in BALKAN Code

Here we use redraw and render event listeners to show the tolltip.

Orientations

Edit in BALKAN Code

Here we use setOrientation to change the orientations on buttons click.

Orientations with Arrows

Edit in BALKAN Code

Here we show how we have arrows in all orientations.

World Cup 2022

Edit in BALKAN Code

This example demonstrates how to dynamically define a template and add chart levels.

Dynamic Width

Edit in BALKAN Code

This example demonstrates how to implement dynamic width using node-initialized event listener and how to implement custom Expand/Collapse buttons

Icons and Images

Edit in BALKAN Code

This demo shows how you can use SVG and PNG images in the node template.

Google Material Icons

Edit in BALKAN Code

This demo shows how you can use google icons in the node template.

Minimal

Edit in BALKAN Code

A simple chart

Highlight levels

Edit in BALKAN Code

Highlight levels in different colors.

Highlight Direction Select

Edit in BALKAN Code

Use the radio buttons to change the chart configuration and select the highlight direction.

Highlight on Hover and Select on Click

Edit in BALKAN Code

This example demonstrates how to select the highlighted nodes up to the root on node click.

Highlight on Hover, Select on Click and Clear Selection

Edit in BALKAN Code

This example demonstrates how to highlight, select and clear selection.

Select and Highlight Multiple Nodes to the root

Edit in BALKAN Code

This example demonstrates how to use the onNodeClick event to select multiple nodes while highlighting the path from each selected node to the root.

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.

Colorful Links

Edit in BALKAN Code

This example demonstrates how to dynamically define a template and Links based on node data by assigning department-specific colors, using tags.

Simple Nodes and Links Styling

Edit in BALKAN Code

This example shows you how you can sustomize the links and add a hover effect with CSS only.

Curve Links

Edit in BALKAN Code

This example shows you how you can sustomize the links

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

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.

Links, Arrows and Labels

Edit in BALKAN Code

Customizing links and labels

Simple Template

Edit in BALKAN Code

Simple template demo.

Department Template

Edit in BALKAN Code

This Department template demo shows how to use tags to apply three different simple templates within a single chart.

Advanced Usage

Edit in BALKAN Code

This demo uses a slider to switch between different template variants while keeping the same chart data.

Orientation

Edit in BALKAN Code

How to change orientation

Concept Map

Edit in BALKAN Code

Here orientation is used and dynamic node definition