JavaScript organizational chart, or simply org chart, is the most popular diagram type for visualizing
hierarchy within any system. Here you will find DHTMLX organizational chart templates, features, and
integration guides with Angular, React, and Vue.
Open a demo on desktop
This org chart demo is made with the DHTMLX Diagram library.
Get a 30-day trial to test this demo and 20+ others in your projects free of charge.
What JS Org Charts Do and How DHTMLX Helps Add Them in Web Applications
JavaScript org charts reflect the structure and relationships between elements, items,
members, or units within hierarchical systems. Many HRM and ERP solutions heavily rely
on organizational charts to outline the roles of personnel inside a company. Corporate
intranet sites, HR portals, and other internal systems with embedded organizational
charts help employees and stakeholders understand the structure of an organization
and the connections between its members. A parent shape (or several parent shapes)
depicting the highest-ranking member of the company is at the top of an org chart.
Below are children shapes illustrating the sub-levels in the organizational hierarchy
(company’s departments and teams).
DHTMLX allows you to add any HTML5 org charts to your web application. DHTMLX enables
developers to create JavaScript org charts in a matter of seconds and tailor them to
the requirements of a given project with the help of a rich and flexible API and CSS.
Being a pure JavaScript library, DHTMLX Diagram is easy to integrate and use with
any technical stack, including React, Angular, Vue.js, Svelte, and TypeScript.
Key Features of DHTMLX JavaScript Org Charts
Parent and assistant shapes
A parent shape represents the highest member of a hierarchy. For example,
it can be the head of a company or department. In real life, there can be
a couple of top managers or company founders at the highest level of an
organization. To demonstrate their roles DHTMLX allows adding assistant
or partner shapes to the parent shape.
This feature can be of great use for creating
family trees
as well, when you need to show the descendants of a large family.
Open/collapse child shapes
It is possible to equip the cards of your chart with an icon for expanding
org chart branches containing child shapes. Besides, you can define which cards
are always visible and which are hidden by default.
Card header color
Each card of an HTML organization chart has a colored line on top,
which you can specify via the “headerColor” property in the
configuration object of the shape. Org chart cards of the same level
have the same header color.
Images inside shapes
A crucial feature of JavaScript organizational charts is the ability to put
pictures of colleagues or family members inside cards. DHTMLX Diagram makes
it easy to add images to shapes via the “img” attribute of the shape object.
Zooming
Another handy feature is zooming
in and out a widely branched organizational chart. DHTMLX enables developers
to equip diagrams with a slider for switching between different zoom levels.
This feature gives end-users reading the chart convenience in exploring every
step of the hierarchical structure.
Search for shapes (scrolling)
Additionally, you can seamlessly integrate a
shape search
feature, significantly enhancing the ability of end-users to navigate and
manage large organizational charts. This functionality is available via
the versatile API of the DHTMLX Diagram library.
Per-shape toolbar
To make informative and interactive org charts in HTML5 and JavaScript, developers can
equip shapes with a
toolbar,
which provides end-users with the necessary options for interacting
with org cards. A toolbar can contain any icons you need. For example,
you can add an icon for downloading or viewing the records related to
a particular team member.
Item selection
One more feature contributing to the interactivity of DHTMLX JavaScript org
charts is the ability to
select cards
by clicking on a card. It is enabled via the “select” attribute of the
diagram configuration object.
Custom shape templates
The main advantage of the DHTMLX JavaScript org chart library is its
flexible customization. You can create and fill cards of your org
chart with any content you need. You can define
shapes' templates
with the necessary fields like position, phone, email, and other
details or credentials. Moreover, you can add icons and any other
HTML elements.
Export to PDF/PNG
It is essential to have the possibility to
export an organizational chart
to a readable format such as PDF/PNG. DHTMLX Diagram enables developers to
set up the export of org charts either via the DHTMLX online export service
or using a local export module.
Touch support
With DHTMLX Diagram, your end-users can read and edit org charts on any device
due to touch support. Commonly used touch gestures like tap, double tap, press,
hold, and drag help users interact with each and every element of such a
responsive HTML organization chart.
Localization
No matter the language of your web application, the localization feature makes
it easy to translate the interface of the org chart editor and provide the
correct labels via the API.
JavaScript Org Chart Integrations
You can smoothly integrate DHTMLX JavaScript org charts into any web application.
To save you time and effort, we have prepared code snippets and demos on GitHub,
which guide you through the integration steps for the most popular frameworks:
React, Angular, and Vue.js. You can also read a short guide on how to use JS org
charts with TypeScript.
Angular
Vue.js
React
TypeScript
