JavaScript Org Chart

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.
Get free trial
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.
Get free trial

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
Family Tree with DHTMLX

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
DHTMLX Org Chart Header

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.


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
DHTMLX Organizational Chart 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
DHTMLX Custom Org Card

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.


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.

Live demo
Using DHTMLX org charts with
GitHub demo
Using DHTMLX org charts with
TypeScript support
Take your data visualization to the next level with DHTMLX Diagram
Download the DHTMLX trial version and evaluate it free of charge for 30 days benefiting from the official technical support of our team.
NO credit card required