Hierarchy Layout

The classic organization chart layout, with support for horizontal/vertical axis and a number of different alignment options

Vanilla JS

React

Angular

Vue

Svelte

Typescript

Hierarchy layout with orthogonal edge routing

Hierarchy layout with orthogonal edge routing, bus mode

Hierarchy layout with direct edge routing

Vertical alignment, parent relative placement

Horizontal alignment, parent relative placement

Horizontal alignment, centered placement

The source code for this demo is available on Github.

Vanilla JS

Angular

React

Svelte

https://github.com/jsplumb-demonstrations/hierarchy-layout

If you haven't got a license for JsPlumb, we offer 30 day evaluations.

Start a free trial

What is a Hierarchy Layout?

A Hierarchy layout renders nodes in a hierarchical tree. The classic use case for this layout is for Organisation Charts, but there are many datasets for which this layout is useful. On our site we use this layout for our Org Chart demonstration, as well as for our collapsible tree demonstrationand selection rendering demonstration

One great feature of JsPlumb's Hierarchy layout is its ability to integrate with the Edge Routing plugin - we've included a couple of examples of that in this page.

This layout can be used seamlessly with JsPlumb's Angular, React, Vue and Svelte integration packages.

For a full discussion of this layout, see our docs: https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/layout-hierarchy

More Demos

See all demos